Code – Take the blue and yellow rings as an example

 <div class="container">
    <div class="ring blue"></div>
    <div class="ring yellow yellow1"></div>
    <div class="ring yellow yellow2"></div>
</div>
Copy the code
.ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    border-style: solid;
    border-width: 10px;
}

.blue {
    border-color: #0180C3;
    top: 0;
    left: 0;
    z-index: 0;
}

.yellow {
    border-color: #FEB131;
    left: 70px;
    top: 60px;
}

.yellow1 {
    /* On the blue ring */
    z-index: 1;
    /* Cutting circle */
    clip-path: polygon(0 0.100% 100%.0 100%);
}


.yellow2 {
    /* Under the blue ring */
    z-index: -1;
    clip-path: polygon(0 0.100% 100%.100% 0);
}
Copy the code

The interleaving effect of the ring is explained

Take the blue and yellow rings for example:

The blue ring is the datum and the yellow ring is cut into two parts, the first part above the blue ring and the second part below the blue ring.

After you have drawn the blue and yellow rings, you can continue to draw the black rings. This time the datum is changed to a yellow ring, and the black ring is cut into two parts. And then the green ring and the red ring, same principle.

The complete code

Jsbin.com/duhubis/edi…