<div class="main-circle">
<div class="green-circle">
<div class="brown-circle">
</div>
</div>
</div>
.main-circle {
width: 150px;
height: 150px;
border:4px solid blue;
border-top: 4px solid transparent ;
border-right:4px solid transparent;
position:relative;
border-radius:50%;
display: flex;
justify-content: center;
align-items: center;
}
.main-circle:before {
width: 100%;
height: 100%;
position:absolute;
content:'';
border:4px solid transparent;
border-right:4px solid blue;
transform: rotate(40deg);
border-radius:50%;
}
.green-circle {
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
border:4px solid green;
border-top:4px solid transparent;
border-right:4px solid transparent;
transform: rotate(-20deg);
border-radius:50%;
position:relative;
}
.green-circle:before {
content:'';
width: 100%;
height: 100%;
border-radius:50%;
position:absolute;
border:4px solid transparent;
border-right:4px solid green;
transform: rotate(60deg);
}
.brown-circle {
width: 80px;
height: 80px;
border:4px solid #9e4f4f;
border-top:4px solid transparent;
border-right:4px solid transparent;
transform: rotate(-20deg);
border-radius:50%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.