## 你能只使用 CSS 將圓切成段嗎？-css教學-PHP中文網

## 你能只使用 CSS 將圓切成段嗎？

Barbara Streisand

發布： 2024-10-25 02:25:02

原創

744 人瀏覽過

## Can You Slice a Circle into Segments Using Only CSS?

使用CSS在圓中分段：技術探索

在CSS中使用邊框半徑屬性創建一個圓是眾所周知的技術。但是，是否可以如所提供的影像中所示分割圓？問題是，是否可以在不依賴 JavaScript、僅透過 HTML 和 CSS 的情況下實現這一目標。

2024 年的解決方案

為了深入研究這個問題，我們將分類不同場景：

不屬於元素的相等切片
不屬於元素的不等切片
需要內容或動畫的相等切片
需要內容或動畫的不等切片需要內容或動畫

不存在元素的等切片

利用調色板，SCSS 可以為conic-gradient() 產生一個停止列表來創建均勻的切片。例如，考慮以下調色盤：

$c: #f94144, #f3722c, #f8961e, #f9c74f, #90be6d, #43aa8b, #577590;

登入後複製

我們定義一個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) 0% $i*$p
    }
    
    @return $l
}

登入後複製

此方法產生以下停靠點清單：

#f94144 0% 14.2857142857%, #f3722c 0% 28.5714285714%,
#f8961e 0% 42.8571428571%, #f9c74f 0% 57.1428571429%,
#90be6d 0% 71.4285714286%, #43aa8b 0% 85.7142857143%,
#577590 0% 100%

登入後複製

但是，此輸出包含不必要的小數和明確的預設停止點。因此，改進的函數是：

@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
}

登入後複製

結果如下：

#f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, #f9c74f 0% 57%,
#90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%

登入後複製

此函數產生更直觀的停止。

在二次曲線中利用此函數-gradient()，我們定義以下類別：

.pie {
    width: 20em; /* set width to desired pie diameter */
    aspect-ratio: 1; /* make the element square */
    border-radius: 50%; /* turn square into disc */
    /* equally-sized slices */
    background: conic-gradient(stops($c))
}

登入後複製

只需四個CSS 聲明，我們就可以創建一個分割成相等切片的圓。要旋轉切片，我們只需為 conic-gradient() 指定不同的起始角度。

background: conic-gradient(from 17deg, stops($c))

登入後複製

現場示範：

<code class="html"><div class="pie"></div>

登入後複製

<code class="css">.pie {
  width: 16em; /* set width to desired pie diameter */
  aspect-ratio: 1; /* make pie element square */
  border-radius: 50%; /* turn square into disc */
  /* equally sized slices */
  background: 
    conic-gradient(from 17deg, #f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, 
        #f9c74f 0% 57%, #90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%)
}</code>

登入後複製

以上是## 你能只使用 CSS 將圓切成段嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！