---

前言

1、不是真正的五环，因为通过形变得来。
2、不同电脑显示器的像素不同，显现的效果不同。
3、不推荐使用此方法。
4、主要通过旋转加平移的方式实现。

---

效果图

---

html

<div class="olympic_rings"><span class="ring"></span><span class="ring"></span><span class="ring"></span><span class="ring"></span><span class="ring"></span>
</div>

---

css

.olympic_rings {display: flex;flex-wrap: wrap;width: 400px;justify-content: center;transform-style: preserve-3d;
}.ring {width: 100px;height: 100px;border: 10px solid #3884c2;border-radius: 50%;margin: 0 5px;
}.ring:nth-child(2) {border-color: #000000;transform: translateZ(-1px) rotateX(2deg);
}.ring:nth-child(3) {border-color: #d83a31;transform: translateZ(10px) rotateY(-15deg);
}.ring:nth-child(4) {border-color: #f9d549;margin-top: -50px;transform: rotateX(1deg);transform-origin: center 15%;
}.ring:nth-child(5) {border-color: #55ac58;margin-top: -50px;transform: rotateX(3deg);transform-origin: center 15%;
}