这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战
奥运会马上结束了，为了庆祝中国队的良好表现，今天我们来绘制一个奥运五环。
先看奥运五环的图：
实现的难点在于两个圆环交叉的位置互有遮盖，换句话说，我们不能通过简单的对每个圆环设置z-index来实现图形的绘制，那么应该怎么办呢？
我们先来绘制一个圆环：
实现代码如下：
<!DOCTYPE html>
<body>
<div class="circle"></div>
</body>
<style>
.circle {
width: 200px;
height: 200px;
border: 10px solid;
border-radius: 50%;
border-bottom-color: blue;
border-top-color: brown;
border-left-color: chartreuse;
border-right-color: black;
border-bo
}
</style>
</html>
展现效果如下图所示：
但是虽然可以设置圆环四个边界的颜色，但是CSS却不可以设置每个边界的z-index，仅可以设置每个方向边界的颜色。我们注意到颜色可取值中有一个可取值为：transparent。因此，我们考虑给每个圆环上再覆盖一层同样的圆环，因此两个圆环相交实际可能是3,4个圆环相交。
具体实现代码如下：
<!DOCTYPE html>
<head>
<title>纯CSS实现奥运五环效果</title>
</head>
<body>
<div style="position: absolute;border: 1px solid red;height: 400px;">
<div class="blue circle">
<div class="blue-cover circle"></div>
</div>
<div class="black circle">
<div class="black-cover circle"></div>
</div>
<div class="red circle">
<div class="red-cover circle"></div>
</div>
<div class="yellow circle">
<div class="yellow-cover circle"></div>
</div>
<div class="green circle">
<div class="green-cover circle"></div>
</div>
</div>
</body>
<style>
.circle {
width: 200px;
height: 200px;
border: 10px solid red;
border-radius: 50%;
position: absolute;
}
.blue {
border-color: blue;
position: absolute;
top: 0;
left: 0;
}
.blue-cover {
border-color: blue;
z-index: 2;
border-bottom-color: transparent;
position: absolute;
top: -10px;
left: -10px;
}
.black {
border-color: black;
position: absolute;
top: 0;
left: 230px;
}
.black-cover {
border-color: black;
z-index: 2;
border-left-color: transparent;
position: absolute;
top: -10px;
left: -10px;
}
.red {
border-color: red;
position: absolute;
top: 0;
left: 460px;
}
.red-cover {
border-color: red;
z-index: 2;
border-left-color: transparent;
position: absolute;
top: -10px;
left: -10px;
}
.yellow {
border-color: dodgerblue;
position: absolute;
top: 110px;
left: 110px;
}
.yellow-cover {
border-color: yellow;
position: absolute;
top: -10px;
left: -10px;
}
.green {
border-color: green;
position: absolute;
top: 110px;
left: 340px;
}
.green-cover {
border-color: green;
z-index: 2;
border-top-color: transparent;
border-right-color: transparent;
position: absolute;
top: -10px;
left: -10px;
}
</style>
<html>
</html>
其中实现过程中遇到了z-index的问题。
参考文章：
