CSS Olympic Rings | CSS-Tricks
Briefly

These layers are positioned one after the other (on the z-axis) to get the depth of the 3D object which, in our case, is a ring. The combination of the shape, size, and color of each layer - plus the way they vary from layer to layer - is what creates the full 3D object.
I'm using 16 layers where each layer is a different shade (with the darker layers stacked at the back) to get a simple lighting effect, and using the size and thickness of each layer to establish a round, circular shape.
Read at CSS-Tricks
[
]
[
|
]