如何在不使用 JavaScript 的情况下使用 CSS 创建分段圆？

使用 CSS 在圆圈中分段

使用 CSS 的 border-radius hack 创建圆圈是一种常见的做法，但是如何实现分段外观是否像所提供的图片中所描绘的那样？有没有办法使用 HTML 和 CSS（不包括 JavaScript）来实现此目的？

解决方案

2024 解决方案

让我们探索一下根据段是否需要是元素以及它们的大小是否相等而有不同的情况：

1。切片不需要是元素并且它们是相等的

在这种情况下，我们可以利用调色板并使用 SCSS 生成均匀分布切片的 conic-gradient() 。例如，使用来自coolors.co的调色板，我们可以创建一个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; /* 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))
}</code>

这种方法允许我们创建相等的段，而不需要单独的元素。调整 conic-gradient() 的起始角度也变得可行。

2.其他情况

我们可以探索其他情况，例如：

• 切片不需要是元素，但它们不相等
• 切片需要content/ 动画出来，它们是相等的
• 切片需要 content/ 动画出来，它们不相等

每个 этих 案例都需要独特的方法和技术，超越原始查询的范围。

以上是如何在不使用 JavaScript 的情况下使用 CSS 创建分段圆？的详细内容。更多信息请关注PHP中文网其他相关文章！