CSS - 各种颜色的圆形边框

使用CSS:

使用CSS完全可以实现(如Quantastical的回答和此处所示),但CSS真的是正确的工具吗？我的回答是否定的.原因是因为使用CSS创建这样的形状/效果本身非常困难,除此之外,它们还有一些限制.例如,下面的代码段仅在背景为纯色时才有效.IE中不完全支持剪辑路径示例,在FF中它仅适用于内联SVG.

如果你仍然希望继续使用CSS,那么下面是另一个替代.在这里,我们使用skew4个元素(真实或伪)的变换,所有这些元素都是父元素大小的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;
}