如何在純 CSS 圓餅圖中加入切片之間的間距？

在純 CSS 餅圖切片中加入間距：實用的解決方案

使用純 CSS 技術呈現的圓餅圖為視覺化資料提供了優雅的解決方案。然而，切片之間沒有間距會降低圖表的有效性。要解決此問題並建立與所提供的圖像類似的餅圖，請按照以下步驟操作：

第1 步：刪除不必要的Clip-Path

原始程式碼廣泛使用了Clip-Path，其中引入了不必要的複雜性。相反，創建一個圍繞絕對定位和邊框半徑的簡化結構。

第 2 步：建立容器 Div

建立一個容器 div，將所有切片集中放置，同時使用隱藏任何溢位區域溢位：隱藏。

第 3 步：絕對定位切片

在容器，絕對定位每個切片並將其擴展以佔據整個可用空間。利用邊框半徑，確保切片呈現圓形。

第 4 步：定義邊框寬度和顏色

對於每個切片，使用 border 屬性定義邊框寬度和顏色。利用自訂 CSS 變數（例如 --c）來簡化邊框顏色的修改。

第 5 步：旋轉切片

對每個切片應用 Transform:rotate() 以使它們正確對齊週長。

範例程式碼

實作以下程式碼來建立純CSS 餅圖切片之間有間距：

.palette {
  height: 200px;
  width: 200px;
  position: relative;
  overflow: hidden;
}

.palette > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 50px solid var(--c, red);
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 33.745%);
}

.color1 {
  transform: rotate(72deg);
  --c: blue;
}

.color2 {
  transform: rotate(144deg);
  --c: orange;
}

.color3 {
  transform: rotate(-72deg);
  --c: green;
}

.color4 {
  transform: rotate(-144deg);
  --c: purple;
}

<div class="palette">
  <div class="color1"></div>
  <div class="color2"></div>
  <div class="color3"></div>
  <div class="color4"></div>
</div>

使用此程式碼，您現在可以建立一個程式碼具有視覺吸引力的純CSS 圓餅圖，切片之間有清晰的間距。

以上是如何在純 CSS 圓餅圖中加入切片之間的間距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！