如何在不使用 JavaScript 的情況下使用 CSS 將圓分割成相等或不同的大小？

使用 CSS 分割圓形

在 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中文網其他相關文章！