CSS - circle border with various colors

Question

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 t

Answer 1

Using CSS:

It is definitely possible to achieve with CSS (as already shown in Quantastical's answer and here) but is CSS really the right tool to do this? My answer would be NO. The reason is because creating such shapes/effects using CSS is very tough in itself and in-addition to it, they come with some restrictions. For example, the below snippet works only when the background is a solid color. Clip Path example is not supported in IE completely and in FF it works only with inline SVG.

If you still wish to proceed doing it using CSS then the below is another alternate. Here, we make use of skew transforms on 4 elements (real or pseudos) all of which are 50% x 50% of their parent's size. The skew transforms produces the sector like appearance and thus looks more realistic. Background color assigned to these skewed elements is overlayed on top of another element which has full border and it looks as though part of the border is differently colored. Finally, we add another div with white background on top of all these to mask the inner portions of the circle (so that only border is visible).

.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;
}

---

Using SVG:

Because of all the aforementioned reasons, I would recommend you to use SVG for this. SVG makes creation of such shapes/effects very easy, the code is easily understandable, they are responsive by nature.

My SVG skills aren't great and it is very much possible that the no. of elements could be reduced. The below snippet is only a sample to illustrate what is possible.

Here, we use 5 circle elements (1 for the gray border and 1 each for the colors). The #gray circle has a full gray border whereas all the other circles only have partial border (in the required color). The partial borders are produced using stroke-dasharray and stroke-dashoffset.

The stroke-dasharray property is used to produce dashed borders by giving the length of the stroke (color) and the length of the dash (transparent) as values. For this case, the length of the dash should be equal to the circle's circumference (2 * PI * r) whereas for length of the stroke, I have used 1/8th of the circumference of the value.

The stroke-dashoffset property is used to specify the offset from where the stroke should start. The offset is calculated from the 0deg position (which is the point represented by (100%, 50%)). By setting the appropriate offset values, the required effect can be produced.

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) */
}