51工具盒子2020东京奥运会正在如火如荼进行着，希望中国队再接再厉力压日本队，稳住前二吧。今天给大家分享的是奥运会的5环图形，我们用如何用CSS3去花呢？先来看下最终效果图：
首先我们规划HTML：
<div class="container">
<div class="ring blue"></div>
<div class="ring yellow yellow1"></div>
<div class="ring yellow yellow2"></div>
</div>
对应的CSS3代码：
.ring {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
border-style: solid;
border-width: 10px;
}
.blue {
border-color: #0180C3;
top: 0;
left: 0;
z-index: 0;
}
.yellow {
border-color: #FEB131;
left: 70px;
top: 60px;
}
.yellow1 {
/* 在蓝色的环上面 */
z-index: 1;
/* 切割圆 */
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.yellow2 {
/* 在蓝色的环下面 */
z-index: -1;
clip-path: polygon(0 0, 100% 100%, 100% 0);
}
然后再实现环之间交错效果。以蓝色和黄色的环为例：
蓝色的环为基准，黄色的环切割成两个部分，第一个部分在蓝色的环上面，第二个部分在蓝色的环下面。
画完蓝色和黄色的环以后，就可以继续画黑色的环。这次基准变成了黄色的环，要将黑色的环切割成两个部分。然后分别是绿色和红色的环，一样的原理。
基本原理就这么多了，接下来分享下完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS3：画个奥运会五环图形效果 | Web前端之家www.jiangweishan.com</title>
<style>
body {
margin: 0;
}
.container {
margin:100px auto;
width: 500px;
height: 200px;
position: relative;
}
.ring {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
border-style: solid;
border-width: 10px;
}
.blue {
border-color: #0180C3;
top: 0;
left: 0;
z-index: 0;
}
.yellow {
border-color: #FEB131;
left: 70px;
top: 60px;
}
.yellow1 {
z-index: 1;
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.yellow2 {
z-index: -1;
clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.black {
border-color: black;
left: 140px;
top: 0px;
}
.black1 {
z-index: -2;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.black2 {
z-index: 0;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.green {
border-color: #059341;
left: 210px;
top: 60px;
}
.green1 {
z-index: 1;
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.green2 {
z-index: -1;
clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.red {
border-color: #FF0000;
left: 280px;
top: 0px;
}
.red1 {
z-index: -2;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.red2 {
z-index: 0;
clip-path: polygon(100% 100%, 100% 0, 0 100%);
}
</style>
</head>
<body>
<div class="container">
<div class="ring blue"></div>
<div class="ring yellow yellow1"></div>
<div class="ring yellow yellow2"></div>
<div class="ring black black1"></div>
<div class="ring black black2"></div>
<div class="ring green green1"></div>
<div class="ring green green2"></div>
<div class="ring red red1"></div>
<div class="ring red red2"></div>
</div>
</body>
</html>
大家可以预览下效果。
