<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五环</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.circle,.circle::after{
width: 200px;
height:200px;
border: 10px solid rgb(12,139,210);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute;
}
.circle::after{
content: "";
top:-10px;
left:-10px;
}
.circle1{
top:0px;
left:0px;
}
.circle1::after{
z-index: 1;
/* 设置透明度 */
border-bottom-color: transparent;
}
.circle2{
border-color: rgb(23,19,20);
top:0;
left:230px;
}
.circle2::after{
border-color: rgb(23,19,20);
z-index: 1;
border-left-color: transparent;
}
.circle3{
border-color: rgb(245,23,18);
top:0;
left:460px;
}
.circle3::after{
border-color: rgb(245,23,18);
z-index: 1;
border-left-color: transparent;
}
.circle4{
border-color: rgb(255,172,50);
left:110px;
top: 110px;
}
.circle4::after{
border-color:rgb(255,172,50);
}
.circle5{
border-color: rgb(7,159,76);
top: 110px;
left:340px;
}
.circle5::after{
border-color: rgb(7,159,76);
z-index: 2;
border-top-color: transparent;
border-right-color: transparent;
}
</style>
</head>
<body>
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<div class="circle circle4"></div>
<div class="circle circle5"></div>
</body>
</html>