线上地址http://lsenlin.top/fiveCircle/circle.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.container{
width:360px;
height:150px;
border:1px solid ;
position:relative;
}
.c1,.c2,.c3,.c4,.c5{
position: absolute;
box-sizing:border-box;
width:100px;
height:100px;
border-radius:50%;
}
.c1{
top:0;
left:0;
border-color:#1587c1;
transform: rotate(270deg);
}
.c2{
top:0;
left:130px;
border-color:#000;
transform:rotate(90deg);
}
.c3{
top:0;
left:260px;
border-color: #eb3350;
transform:rotate(90deg);
}
.c4{
top:38px;
left:65px;
border-color:#fab23f;;
}
.c5{
top:38px;
left:195px;
border-color:#1f8b3d;
transform:rotate(90deg);
}
.ring{
z-index:0;
border-bottom-color:transparent;
}
.c1-index,.c2-index,.c5-index{
z-index:1;
}
.c3-index{
z-index:2;
}
</style>
<body>
<div class="container">
<div class="c1"></div>
<div class="c1 ring c1-index"></div>
<div class="c2"></div>
<div class="c2 ring c2-index"></div>
<div class="c3"></div>
<div class="c3 ring c3-index"></div>
<div class="c4"></div>
<div class="c4 ring "></div>
<div class="c5"></div>
<div class="c5 ring c5-index"></div>
</div>
</body>
</html>