CSS - 各种颜色的圆形边框 [英] CSS - circle border with various colors

问题描述

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

Does anybody know how to create this in CSS or if it's even possible. I know how to make quarter circles but I am not sure how to apply it in this format. Small chunks of the border need to be in different colors.

推荐答案

如果你真的想用CSS做到这一点，你可以使用剪贴蒙版来获得你的效果。这种方法需要符合浏览器的兼容性，因此我不知道它会是多么有用，除非你在封闭的环境。

If you really want to do this with CSS, you could potentially use a clipping mask to get the effect you're after. This approach is subject to browser compatibility, though, so I don't know how useful it would be, unless you're in a closed environment.

这不是完美的，或者。剪切路径应该是一个多边形，以确保片段边缘指向圆的中心，而不是与边界框对齐。

It's not perfect, either. The clipping path should probably be a polygon to ensure the segment edges are pointed toward the center of the circle instead of in-line with bounding box.

#circle, #circle .segment {
  border-color: lightgray;
  border-radius: 50%;
  border-style: solid;
  border-width: 5px;
  box-sizing: border-box;
  height: 100px;
  position: relative;
  width: 100px;
}

#circle .segment {
  -webkit-clip-path: inset(0 40px 50px 40px);
  /*content: ''; EDIT: not needed */
  left: -5px;
  position: absolute;
  top: -5px;
}

#circle .segment:nth-child(1) {border-color: red; transform: rotate(-20deg);}
#circle .segment:nth-child(2) {border-color: blue; transform: rotate(70deg);}
#circle .segment:nth-child(3) {border-color: green; transform: rotate(160deg);}
#circle .segment:nth-child(4) {border-color: yellow; transform: rotate(250deg);}

<div id="circle">
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
</div>

这篇关于CSS - 各种颜色的圆形边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！