使用 CSS 在圆中分段

使用 border-radius 在 CSS 中创建圆是一种常见的做法。但是，我们可以通过分段（类似于饼图）实现类似的效果吗？本文深入研究了仅通过 HTML 和 CSS 实现此目的的方法，不包括使用 JavaScript。

生成相等大小的段

相等大小段的一种方法涉及生成以下内容的停止列表：使用 SCSS 的 conic-gradient() 。我们可以创建一个自定义 SCSS 函数 Stops($c)，以根据提供的颜色 ($c) 生成这些 Stops，确保间距相等。此函数考虑切片数量，以百分比形式计算切片角度，并生成具有适当百分比的停止点列表。

例如，使用 Coolors 的调色板，我们可以使用我们的停止点conic-gradient() 声明中的 () 函数：

.pie {
  width: 20em; /* Desired pie diameter */
  aspect-ratio: 1; /* Square element */
  border-radius: 50%; /* Turn square into disc */
  background: conic-gradient(stops($c));
}

此方法允许通过在 conic-gradient() 中指定不同的角度来自定义切片角度。