<!-- https://cssbattle.dev/play/5 -->
<!-- 100% Match -->
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
/* ONLY FOR CODEPEN */
html {
display: grid;
place-content: center;
height: 100%;
background: #333;
}
body {
position: relative;
width: 400px;
height: 300px;
z-index: -1000;
}
/* Apply The following CSS */
body {
margin: 0;
background: #0b2429;
display: grid;
place-items: center;
}
.one,
.two,
.three {
position: absolute;
width: 120px;
height: 120px;
background: #998235;
border-radius: 50% 0 50% 50%;
}
.one,
.three {
background: #f3ac3c;
}
.one {
left: 20%;
top: 50%;
z-index: 11;
}
.two {
z-index: 10;
left: 35%;
top: 30%;
}
.three {
transform: rotate(180deg);
left: 50%;
top: 10%;
z-index: 9;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.