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

使用CSS：

使用CSS完全可以实现（如Quantastical的回答和此处所示）但CSS真的是正确的工具吗？我的答案是否。原因是因为使用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属性用于指定笔划应从哪里开始的偏移量。偏移量由0deg位置（由（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 3

你已经有了很好的答案。

只是为了给你另一种获得这个结果的方法，你可以用多种背景来做。关于这种方法的好消息是你只需要一个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个，改变位置和角度。

除此之外，另一个完全设置为白色的渐变将隐藏中心。

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

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

Answer 4

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

注意：目前，它仅在Chrome上有效，但您可以在链接中查看当前浏览器的支持。

.target {
  width: 60vmin;
  height: 60vmin;
  background: conic-gradient(
    lightgrey 0deg 30deg,
    red 30deg 60deg,
    lightgrey 60deg 120deg,
    yellow 12deg 150deg,
    lightgrey 150deg 210deg,
    green 210deg 240deg,
    lightgrey 240deg 300deg,
    blue 300deg 330deg,
    lightgrey 330deg 360deg
  );
  -webkit-mask-image: radial-gradient(transparent 65%, black 65%);
  mask-image: radial-gradient(transparent 65%, black 65%);
  border-radius: 50%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100vh;
}

<div class="target"></div>

CSS - 各种颜色的圆形边框

4 个答案: