纯 CSS 实现奥运五环，环环相扣！-51CTO.COM

2024 巴黎奥运会正如火如荼地进行，本文来使用 CSS 来画一个奥运五环。奥运五环是相互连接的，因此在视觉上会产生重叠效果，这也是实现五环最有挑战性的部分。接下来，将利用 CSS 的伪元素，巧妙地实现环环相扣的效果！

根据五环的位置特点，可以将中间的黑色环设置为 HTML 的父元素，而将其他颜色的环设置为子元素。这样，其他环就可以相对于黑色环进行定位。整体的 HTML 结构如下：

<div class="black">
  <div class="ring blue"></div>
  <div class="ring yellow"></div>
  <div class="ring green"></div>
  <div class="ring red"></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;
    }
  }
}

最终效果如下：