<div class="plat">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
*{
padding: 0;
margin: 0;
}
.plat{
position: absolute;
border:12px solid red;
top: 50%;
left: 50%;
margin-left:-190px;
margin-top:-93px;
height: 186px;
width: 380px;
}
.circle1,.circle2,.circle3,.circle4,.circle5{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid black;
border-radius: 50%;
}
.circle1{
left: 0;
top: 0;
border-color:green;
}
.circle2{
left:130px;
top: 0;
border-color: red;
}
.circle3{
left:260px;
top: 0;
border-color: aquamarine;
}
.circle4{
left: 65px;
top: 70px;
border-color: bisque;
}
.circle5{
left: 195px;
top:70px;
}
原文地址：https://www.cnblogs.com/combating/p/10804196.html