## 你能仅使用 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中文网其他相关文章！