说到奥运五环，毋庸置疑，作为中国人我们都非常的熟悉，那么你知道如何用 html+css 来实现它吗？If you say”I don’t know”，那么电脑屏幕前的你就一定要看过来啦！
首先要写 5 个 div , 为了在写 css 时的样式方便，先给所有 div 设置一个相同的类名，然后每一个 div 再分别设置一个类名以便于区分。
<div class=”ring one”></div>
<div class=”ring two”></div>
<div class=”ring three”></div>
<div class=”ring four”></div>
<div class=”ring five”></div>
接下来就要写 css 的样式了。
相同的样式
给所有的 div 都设置一个宽高、边框以及边框圆角（因为我们需要的是一个圆环，所以边框圆角的半径要为宽 / 高加上边框宽度的一半），先看一下效果。
显然目前并不是我们想要的，因此需要用定位来让每一环到达其应该在的位置。因为每一个环前面的环都有高度，所以要在相同的样式里面加一个绝对定位让每一个环都能脱离文档流，再来看一下效果。
.ring{
width: 200px;
height: 200px;
border: 10px solid;
position: absolute;
border-radius: 110px;
}
不同的样式与定位
首先分别给每一个环写上蓝黑红黄绿的颜色样式，然后给每一个环都写上具体的 left 值和 top 值。这样初步的五环就形成了。
.one{
border-color: blue;
top: 0;
left: 0;
}
.two{
border-color: black;
top: 0;
left: 230px;
}
.three{
border-color: red;
top: 0;
left: 460px;
}
.four{
border-color: yellow;
top: 110px;
left: 110px;
}
.five{
border-color:green;
top: 110px;
left: 340px;
}
after
现在我们看到的五环并不是套在一起的，在这里用到了 after 选择器，通过此选择器可以再制作出 5 个与之前一样的环，除颜色外的样式和位置都没有变，完全就叠加在原来之上。下面介绍以下 after 的用法：
所有主流浏览器都支持 :after 选择器。:after 选择器在被选元素的内容后面插入内容。使用 content 属性来指定要插入的内容。此时相同代码部分与之前一样，所以就用兄弟选择器的方法写在一起。
.ring,.ring::after{
width: 200px;
height: 200px;
border: 10px solid;
position: absolute;
border-radius: 110px;
}
.ring::after{
content: ”;
top: -10px;
left: -10px;
}
伪元素选择器的样式
接下来要想办法让环与环套在一起了，现在是 5 个带有颜色的环上面有 5 个还没有设置边框颜色的环，在设置 border-radius 之前它们是正方形，因此现在也是一样有上下左右 4 个边框的，所以只要把显示在邻近环底下的那一部分边框颜色设置为透明，并且把显示在邻近环上面的那一部分边框设置 z-index=1。
.one::after{
border-color: blue;
z-index: 1;
border-bottom-color: transparent;
}
.two::after{
border-color: black;
z-index: 1;
border-left-color: transparent;
}
.three::after{
border-color: red;
z-index: 2;
border-left-color: transparent;
}
.four::after{
border-color: yellow ;
}
.five::after{
border-color:green;
z-index: 1;
border-top-color: transparent;
}
到这里已经完成了，^_^···