CSS切割圓形分割效果實現攻略

發佈於2025-04-13

## Can You Slice a Circle into Segments Using Only CSS? 在圓圈中使用CSS：探索技術的探索

使用Border Radius屬性在CSS中創建一個圓圈是一種知名技術。但是，是否可以按照提供的圖像如圖所示分割圓圈？ The question arises whether this can be achieved without relying on JavaScript and solely through HTML and CSS.

Solution for 2024

To delve into this issue, we'll categorize different scenarios:

Equal slices without being elements

Unequal slices without being elements

Unequal slices that require content or animation
Equal Slices Without Being Elements

Leveraging a color palette, SCSS can generate a stop list for a conic-gradient() to create uniform切片。 For instance, consider the following palette:

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

We define a SCSS function to generate equally spaced slices:

@function停止（$ c）{ $ n：長度（$ c）; //切片數 $ P：100％/$ n; //將角度分為圓的百分比 $ l：（）; //停車列表，最初是空的 @for $ i從1到$ n { $ L：$ L，nth（$ c，$ i）0％$ i*$ p } @return $ l }

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

＃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％

但是，此輸出包括不必要的小數和明確的默認停止。因此，改進的函數是：

在圓錐形源（）中使用此功能，我們定義了以下類：寬度：20em; / *將寬度設置為所需的派直徑 */ 方面比例：1; / *製作元素平方 */ 邊界拉迪烏斯：50％； / *將正方形變成光盤 */ / *同等大小的切片 */ 背景：錐形獎學金（停止（$ c）） }

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

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

Live Demo:

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

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

.pie { 寬度：16EM； / *將寬度設置為所需的派直徑 */ 方面比例：1; / *製作派元素平方 */ 邊界拉迪烏斯：50％； / *將正方形變成光盤 */ / *同等大小的切片 */ 背景：圓錐分子（來自17DEG，＃F94144 14％，＃F3722C 0％29％，＃F8961E 0％43％，＃F9C74F 0％57％，＃90BE6D 0％71％，＃43AA8B 0％86％，＃577590 0％） }