最佳答案
您已经有了很好的答案。
只是给你另一种方法来获得这个结果,你可以用多个背景来做。这种方法的好消息是您只需要一个 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 会使颜色使用为边框保留的空间。
请注意,此解决方案适用于任何边框/边框-半径组合
关于CSS - 各种颜色的圆形边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34143736/