one <div>
Ghost
A friendly ghost with wavy hem made from radial gradients.
<div class="od od-ghost"></div>
.od {
position: relative;
display: block;
box-sizing: border-box;
}
.od::before,
.od::after {
content: '';
position: absolute;
box-sizing: border-box;
}
.od-ghost {
width: 64px; height: 78px; background: #fff; border-radius: 32px 32px 8px 8px;
box-shadow: 0 12px 28px rgba(15,23,42,0.16);
}
.od-ghost::before {
width: 12px; height: 12px; border-radius: 50%; background: #1e293b;
top: 28px; left: 14px; box-shadow: 24px 0 0 #1e293b;
}
.od-ghost::after {
width: 100%; height: 18px; left: 0; bottom: -8px;
background:
radial-gradient(circle at 10px 0, #fff 10px, transparent 11px),
radial-gradient(circle at 32px 0, #fff 10px, transparent 11px),
radial-gradient(circle at 54px 0, #fff 10px, transparent 11px);
}