<div class="head">
<div class="hair">
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
</div>
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="mouth"></div>
<div class="ears"></div>
</div>
*, *::before, *::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: grid;
place-items: center;
background: #3C8D3F;
min-height: 100vh;
}
.head {
position: relative;
width: 150px;
height: 150px;
background: #14F078;
border-radius: 15% 15% 100% 100% / 15% 15% 100% 100%;
}
.hair {
position: absolute;
top: 0;
left: 0;
right: 0;
background: #1A1D2F;
height: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.triangle {
position: absolute;
bottom: 0;
width: 30px;
height: 15px;
background: #1A1D2F;
translate: 0 100%;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.triangle:nth-child(2) {left: 30px;}
.triangle:nth-child(3) {left: 60px;}
.triangle:nth-child(4) {left: 90px;}
.triangle:nth-child(5) {left: 120px;}
.eyes {
position: absolute;
top: 70px;
display: flex;
justify-content: center;
gap: 30px;
width: 100%;
}
.eye {
position: relative;
width: 30px;
aspect-ratio: 1;
background: #1A1D2F;
border-radius: 100vmax;
}
.eye::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 10px;
aspect-ratio: 1;
background: #FFFFFF;
border-radius: 100vmax;
}
.mouth {
position: absolute;
top: 90px;
inset-inline: 0;
margin-inline: auto;
width: 40px;
aspect-ratio: 1;
background: #1A1D2F;
border-radius: 100vmax;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%)
}
.ears {
position: absolute;
top: 80px;
left: 50%;
translate: -50% 0;
z-index: -1;
width: 133%;
height: 10px;
background: #1A1D2F;
}
.ears::before, .ears::after {
content: "";
position: absolute;
top: -100%;
width: 10px;
height: 30px;
background: inherit;
border-radius: 100vmax;
}
.ears::after {
right: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.