使用 CSS 在圓中分段

使用 border-radius 在 CSS 中建立圓是一種常見的做法。但是，我們可以透過分段（類似餅圖）來實現類似的效果嗎？本文深入研究了僅透過 HTML 和 CSS 實現此目的的方法，不包括使用 JavaScript。

產生相等大小的段

相等大小段的一種方法涉及產生以下內容的停止列表：使用 SCSS 的 conic-gradient() 。我們可以建立一個自訂 SCSS 函數 Stops($c)，以根據提供的顏色 ($c) 產生這些 Stops，確保間距相等。此函數考慮切片數量，以百分比形式計算切片角度，並產生具有適當百分比的停止點列表。

例如，使用 Coolors 的調色板，我們可以使用我們的停止點conic-gradient() 聲明中的 () 函數：

.pie {
  width: 20em; /* Desired pie diameter */
  aspect-ratio: 1; /* Square element */
  border-radius: 50%; /* Turn square into disc */
  background: conic-gradient(stops($c));
}

此方法允許透過在 conic-gradient() 中指定不同的角度來自訂切片角度。