在 CSS 中，可以使用 border-radius 屬性建立圓形。然而，在這些圈子中添加分段還需要進一步探索。讓我們深入研究如何在不使用 JavaScript 的情況下實現此目的。
如果段不需要 HTML 元素且大小相等，我們可以利用 SCSS 產生 conic-gradient() 的停止點列表。可以建立自訂SCSS 函數來均勻分佈停止點：
<code class="scss">@function stops($c) {
$n: length($c); // number of slices
$p: 100%/$n; // slice angle as a % of circle
$l: (); // list of stops, initially empty
@for $i from 1 through $n {
$l: $l, nth($c, $i)
if($i > 1, 0%, unquote(''))
if($i < $n, round($i*$p), unquote(''))
}
@return $l
}</code>使用此函數，我們可以定義conic-gradient() 內分段的顏色和角度：
<code class="css">.pie {
width: 20em; /* desired pie diameter */
aspect-ratio: 1; /* square element */
border-radius: 50%; /* disc shape */
background: conic-gradient(stops(#f94144, #f3722c, #f8961e, #f9c74f,
#90be6d, #43aa8b, #577590))
}</code>這將創建一個具有大小相等的線段的圓形，均勻分佈在圓週上。
如果線段需要不同的尺寸，我們仍然可以採用類似的策略。可以修改stops()函數以取得定義每個段的開始和結束角度的附加參數。在漸層定義中，我們可以為每個色標指定這些角度。
此外，如果片段需要包含內容或動畫，我們可以使用 HTML 元素並使用 CSS 變換將它們放置在圓圈內。透過仔細調整它們的大小和角度，我們可以創建看起來重疊的片段並創建複雜的設計。
以上是如何在不使用 JavaScript 的情況下使用 CSS 將圓分割成相等或不同的大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
