one <div>
Ice cream
Scoop, highlight and a waffle cone via clip-path.
<div class="od od-icecream"></div>
.od {
position: relative;
display: block;
box-sizing: border-box;
}
.od::before,
.od::after {
content: '';
position: absolute;
box-sizing: border-box;
}
.od-icecream {
width: 46px; height: 46px; border-radius: 50%; background: #fb7185;
box-shadow: 0 -18px 0 -4px #fda4af, 0 10px 20px rgba(251,113,133,0.35);
transform: translateY(-10px);
}
.od-icecream::before {
width: 28px; height: 40px; background: linear-gradient(180deg, #f5d0a9, #e8b88a);
clip-path: polygon(0 0, 100% 0, 50% 100%); top: 40px; left: 9px;
}
.od-icecream::after {
width: 10px; height: 10px; border-radius: 50%; background: #fff; top: 12px; left: 18px; opacity: 0.7;
}