CSS-各种颜色的圆形边框

Question

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

Answer 1

如果您真的想使用CSS进行此操作，则可以使用剪贴蒙版来获得想要的效果。但是，这种方法取决于浏览器的兼容性，因此除非您处于封闭环境中，否则我不知道它的用处。

也不完美。剪切路径可能应该是多边形，以确保线段边缘指向圆心，而不是与边界框成一直线。

#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>

Answer 2

您已经有了很好的答案。

只是给您另一种获得此结果的方法，您可以在多个背景下进行此操作。有关此方法的好消息是您只需要一个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个，更改位置和角度。

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

并将背景原点和剪辑更改为border-box或content-box使颜色使用为边框保留的空间。

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

Answer 3

使用CSS：

使用CSS绝对有可能实现（如Quantastical的答案及其中所示），但是CSS确实是实现此目的的正确工具吗？我的回答是NO。原因是因为使用CSS创建此类形状/效果本身非常困难，而且除此之外，还存在一些限制。例如，以下代码段仅在背景为纯色时有效。 IE不完全支持“剪切路径”示例，在FF中不完全支持“剪切路径”示例，仅适用于嵌入式SVG。

[如果您仍然希望继续使用CSS进行操作，则以下是另一种替代方法。在这里，我们对4个元素（实数或伪数）使用skew变换，它们的大小均为其父级大小的50％x 50％。 skew变换产生类似于外观的扇区，因此看起来更逼真。分配给这些偏斜元素的背景色叠加在另一个具有完整边框的元素上，看起来边框的一部分好像是不同的颜色。最后，我们在所有这些颜色的顶部添加另一个带有白色背景的div，以遮盖圆圈的内部（以便仅显示边框）。

.circle {
  position: relative;
  height: 100px;
  width: 100px;
}
.circle, .dummy-border, .border, .dummy-background {
  border-radius: 50%;
  overflow: hidden;
}
.dummy-border, .border, .dummy-background {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.border {
  border: 4px solid #AAA;
  border-radius: 50%;
  z-index: -2;
}
.dummy-background {
  padding: 4px;
  background-color: white;
  background-clip: content-box;
}
.circle:after, .circle:before, .dummy-border:before, .dummy-border:after {
  position: absolute;
  content: '';
  height: 50%;
  width: 50%;
  z-index: -1;
}
.circle:before {
  top: 0%;
  left: 0%;
  background: red;
  transform-origin: right bottom;
  transform: skewY(30deg) skewX(30deg);
}
.circle:after {
  top: 0%;
  left: 50%;
  background: green;
  transform-origin: left bottom;
  transform: skewY(-30deg) skewX(-30deg);
}
.dummy-border:before {
  top: 50%;
  left: 0%;
  background: orange;
  transform-origin: right top;
  transform: skewY(-210deg) skewX(-30deg);
}
.dummy-border:after {
  top: 50%;
  left: 50%;
  background: blue;
  transform-origin: left top;
  transform: skewY(210deg) skewX(30deg);
}
*, *:after, *:before {
  box-sizing: border-box;
}
<div class='circle'>
  <div class='border'></div> <!-- gray border -->
  <div class='dummy-border'></div> <!-- produces colors along with parent's pseudos -->
  <div class='dummy-background'></div> <!-- overlays a white background to mask -->
</div>

---

使用SVG：

由于上述所有原因，建议您为此使用SVG。 SVG使创建此类形状/效果非常容易，代码易于理解，并且具有自然响应能力。

我的SVG技能不是很好，很可能没有。元素的数量可以减少。下面的代码片段仅是说明可能的示例。

[这里，我们使用5个circle元素（1个用于灰色边框，每个1个用于颜色）。 #gray圆具有全灰色边框，而所有其他圆仅具有部分边框（为所需颜色）。使用stroke-dasharray和stroke-dashoffset产生部分边界。

stroke-dasharray属性用于通过将笔划的长度（颜色）和虚线的长度（透明）作为值来产生虚线边框。对于这种情况，破折号的长度应等于圆的周长（2 * PI * r），而对于笔划的长度，我使用的是值周长的1/8。

stroke-dashoffset属性用于指定笔画应从其开始的偏移量。偏移量是从0度位置（由（100％，50％）表示的点）开始计算的。通过设置适当的偏移值，可以产生所需的效果。

svg {
  height: 100px;
  width: 100px;
}
circle {
  stroke-width: 4px;
  fill: transparent;
}
#gray{
  stroke: #AAA;
}
#red{
  stroke: red;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
  stroke-dashoffset: -159.75; /* offset of arc from start point (1/2 arc length + 1/4 circumference) */
}
#orange{
  stroke: orange;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
  stroke-dashoffset: -88.75; /* offset of arc from start point (1/2 arc length + 1/4 circumference) */
}
#blue{
  stroke: blue;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
  stroke-dashoffset: -17.75; /* offset of  arc from start point (1/2 of arc length) */
}
#green{
  stroke: green;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
  stroke-dashoffset: -230.75; /* offset of arc from start point (1/2 arc length + 3/4 circumference) */
}
<svg viewBox='0 0 100 100'>
  <circle cx='50' cy='50' r='45' id='gray'/>
  <circle cx='50' cy='50' r='45' id='red'/>
  <circle cx='50' cy='50' r='45' id='green'/>
  <circle cx='50' cy='50' r='45' id='blue'/>
  <circle cx='50' cy='50' r='45' id='orange'/>
</svg>

Answer 4

此解决方案使用conic-gradient绘制色标，并使用线性渐变的mask-image去除内圆。