CSS - 各种颜色的圆形边框

Question

有谁知道如何在 CSS 中创建它，或者它是否可能。我知道如何制作四分之一圆，但我不确定如何以这种格式应用它。边框的小块需要使用不同的颜色。

Answer 1

您已经有了很好的答案。

只是给你另一种方法来获得这个结果，你可以用多个背景来做。这种方法的好消息是您只需要一个 div。

.test {
  margin: 25px 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 12px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), 
                    linear-gradient(30deg, red 36%, lightgrey 30%),
                    linear-gradient(120deg, yellow 36%, lightgrey 30%),
                    linear-gradient(300deg, blue 36%, lightgrey 30%),
                    linear-gradient(210deg, green 36%, lightgrey 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
  transform: rotate(30deg);
}

<div class="test"></div>

可以使用倾斜的线性渐变来获取扇区，限制为可用空间的四分之一。 - 我们需要其中 4 个，改变位置和 Angular 。

在这些之上，另一个完全设置为白色的渐变将隐藏中心。

并且将 background-origin 和 clip 更改为 border-box 或 content-box 会使颜色使用为边框保留的空间。

请注意，此解决方案适用于任何边框/边框-半径组合