one <div>
Смайлик
Круг-лицо, глаза через box-shadow у ::before, улыбка у ::after.
<div class="od od-smiley"></div>
.od {
position: relative;
display: block;
box-sizing: border-box;
}
.od::before,
.od::after {
content: '';
position: absolute;
box-sizing: border-box;
}
.od-smiley {
width: 88px; height: 88px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ffe36b, #f5c400 60%, #e0a800);
box-shadow: inset -6px -8px 0 rgba(0,0,0,0.08), 0 10px 24px rgba(0,0,0,0.12);
}
.od-smiley::before {
width: 12px; height: 12px; border-radius: 50%; background: #3b2f1a;
top: 30px; left: 24px; box-shadow: 28px 0 0 #3b2f1a;
}
.od-smiley::after {
width: 42px; height: 24px; border: 5px solid #3b2f1a; border-top: 0;
border-radius: 0 0 28px 28px; top: 48px; left: 23px;
}