## 您可以在不使用 JavaScript 的情況下使用 CSS 建立餅圖分段嗎？

使用 CSS 在圓中分段

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

產生相等大小的段

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

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

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

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

以上是## 您可以在不使用 JavaScript 的情況下使用 CSS 建立餅圖分段嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！