巴黎奥运会正如火如荼地进行，本文来使用 CSS 来画一个奥运五环。奥运五环是相互连接的，因此在视觉上会产生重叠效果，这也是实现五环最有挑战性的部分。接下来，将利用 CSS 的伪元素，巧妙地实现环环相扣的效果！
根据五环的位置特点，可以将中间的黑色环设置为 HTML 的父元素，而将其他颜色的环设置为子元素。这样，其他环就可以相对于黑色环进行定位。整体的 HTML 结构如下：
<div> <div></div> <div></div> <div></div> <div></div> </div>
首先，用 CSS 边框画出黑环和其他四环的基本样式：
.black { position: relative; width: 200px; height: 200px; border-radius: 50%; border-width: 20px; border-style: solid;}.ring { position: absolute; width: 200px; height: 200px; border-radius: 50%; border-width: 20px; border-style: solid; top: -20px; right: -20px;}
接下来画绿环，它相对于黑环进行定位，向右向下移动，并且层级比黑环高：
.green { color: #30a751; top: 70px; right: -125px; z-index: 2;}
此时的效果是这样的，黑环的z-index为 1，绿环的z-index为 2：
而我们希望两环右侧的交车点处，黑环位于上方，这时就可以使用伪元素来实现。给黑环添加一个和它大小一样的伪元素::after，并将其放在黑环的正上方，z-index为3。接着，将伪元素的右边框设置为黑色，其他方向为透明，这样就成功使黑环的右侧看起来位于绿环上方了：
.black { position: relative; width: 200px; height: 200px; border-radius: 50%; border-width: 20px; border-style: solid; &::after { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 100%; top: -20px; right: -20px; border: 20px solid transparent; border-right: 20px solid currentcolor; z-index: 3; }}
这里我来向右移动一下这个伪元素的位置，来看看他的样子：
到这你应该就明白了，这里只是视觉上的环环相扣，实际上，两个环并不在同一层。
接下来画红环。由于绿环的z-index为2，所以红环位于绿环下方：
.red { color: #ef314e; right: -230px;}
.red { color: #ef314e; right: -230px;&::after { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; border-width: 20px; border-style: solid; top: -20px; right: -20px; border: solid 20px transparent; border-bottom: solid 20px currentcolor; z-index: 2; }}
整体代码如下：
.black { position: relative; width: 200px; height: 200px; border-radius: 50%; border-width: 20px; border-style: solid; &::after { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 100%; top: -20px; right: -20px; border: 20px solid transparent; border-right: 20px solid currentcolor; z-index: 3; } &::before { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 100%; top: -20px; right: -20px; border: 20px solid transparent; border-bottom: 20px solid currentcolor; z-index: 1; } .ring { position: absolute; width: 200px; height: 200px; border-radius: 50%; border-width: 20px; border-style: solid; top: -20px; right: -20px; } .green { color: #30a751; top: 70px; right: -125px; z-index: 2; } .red { color: #ef314e; right: -230px;&::after { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; border-width: 20px; border-style: solid; top: -20px; right: -20px; border: solid 20px transparent; border-bottom: solid 20px currentcolor; z-index: 2; } } .yellow { color: #fcb32e; top: 70px; left: -125px; } .blue { color: #0082c9; left: -230px;&::after { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; border-width: 20px; border-style: solid; top: -20px; right: -20px; border: solid 20px transparent; border-right: solid 20px currentcolor; z-index: 2; } }}
最终效果如下：
感谢阅读，记着点个赞哦，在此，谢谢各位啦！！！