<div class="center circle main-circle">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
<div class="center circle inner-circle"></div>
<style>
html {
background: #161616;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle {
border-radius: 50%;
}
.main-circle {
width: 190px;
height: 190px;
background: #A22015;
border: 5px solid black;
overflow: hidden;
}
.inner-circle {
background: black;
width: 50px;
height: 50px;
box-shadow:
0 0 0 10px #E96A23,
0 0 0 25px black;
}
.main-circle > * {
background: #A22015;
width: 70px;
height: 70px;
position: absolute;
left: 50%;
top: 50%;
box-shadow: 0 0 0 15px black;
transform-origin: 50% calc(-50% - 15px);
z-index: 100;
}
.circle-1 {
transform: translate(-50%, calc(50% + 15px)) rotate(240deg);
}
.circle-2 {
transform: translate(-50%, calc(50% + 15px)) rotate(120deg);
}
.circle-3 {
transform: translate(-50%, calc(50% + 15px));
}
</style>
<!-- OBJECTIVE -->
<!-- Write HTML/CSS in this editor and replicate the given target image in the least code possible. What you write here, renders as it is -->
<!-- SCORING -->
<!-- The score is calculated based on the number of characters you use (this comment included :P) and how close you replicate the image. Read the FAQS (https://cssbattle.dev/faqs) for more info. -->
<!-- IMPORTANT: remove the comments before submitting -->