2024 巴黎奥运会正如火如荼地进行,本文来使用 CSS 来画一个奥运五环。奥运五环是相互连接的,因此在视觉上会产生重叠效果,这也是实现五环最有挑战性的部分。接下来,将利用 CSS 的伪元素,巧妙地实现环环相扣的效果!
根据五环的位置特点,可以将中间的黑色环设置为 HTML 的父元素,而将其他颜色的环设置为子元素。这样,其他环就可以相对于黑色环进行定位。整体的 HTML 结构如下:
首先,用 CSS 边框画出黑环和其他四环的基本样式:
接下来画绿环,它相对于黑环进行定位,向右向下移动,并且层级比黑环高:
此时的效果是这样的,黑环的z-index为 1,绿环的z-index为 2:
而我们希望两环右侧的交车点处,黑环位于上方,这时就可以使用伪元素来实现。给黑环添加一个和它大小一样的伪元素::after,并将其放在黑环的正上方,z-index为3。接着,将伪元素的右边框设置为黑色,其他方向为透明,这样就成功使黑环的右侧看起来位于绿环上方了:
效果如下:
这里我来向右移动一下这个伪元素的位置,来看看他的样子:
到这你应该就明白了,这里只是视觉上的环环相扣,实际上,两个环并不在同一层。
接下来画红环。由于绿环的z-index为2,所以红环位于绿环下方:
效果如下:
此时只需按照上面的步骤,给红环添加一个带有红色下边框的伪元素即可:
效果如下:
黄环和蓝环同理,这里直接附上完整代码:
最终效果如下: