<div id="wrap">
<div id="t"></div>
<div id="c"></div>
<div id="b"></div>
</div>
<a href="https://www.uiuxtek.in/posts/collection-of-pure-css3-only-illustrations" class="anchor" target="_blank">More on UIUXTEK.in</a>
body {
margin: 0;
padding: 0;
}
#wrap {
background: #191919;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
#wrap div {
position: relative;
}
#t {
width: 125px;
height: 25px;
}
#t:after,
#t:before {
background: #191919;
border: 5px solid #fe5f55;
content: " ";
width: 10px;
height: 20px;
position: absolute;
border-radius: 55%;
top: 15px;
}
#t:before {
left: 13px;
transform: rotate(-45deg);
}
#t:after {
right: 13px;
transform: rotate(45deg);
}
#c {
background: #fe5f55;
width: 130px;
height: 150px;
margin-top: -5px;
border-radius: 60px;
}
#c:after,
#c:before {
content: "";
background: #000;
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
bottom: 90px;
}
#c:before {
left: 25px;
}
#c:after {
right: 25px;
}
#b {
background: #a64942;
width: 150px;
height: 100px;
border-radius: 55px 55px 45px 45px;
margin-top: -80px;
}
#b:after,
#b:before {
content: "";
background: #000;
position: absolute;
width: 20px;
height: 30px;
border-radius: 50%;
top: 20px;
}
#b:before {
transform: rotate(45deg);
left: 25px;
}
#b:after {
transform: rotate(-45deg);
right: 25px;
}
/* ignore */
.anchor {
position: fixed;
top: 0;
right: 0;
font-weight: bold;
padding: 12px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.