one <div>
Umbrella
Canopy arc plus handle curve on the pseudo-elements.
<div class="od od-umbrella"></div>
.od {
position: relative;
display: block;
box-sizing: border-box;
}
.od::before,
.od::after {
content: '';
position: absolute;
box-sizing: border-box;
}
.od-umbrella {
width: 90px; height: 45px; background: #ef4444;
border-radius: 90px 90px 8px 8px; box-shadow: 0 10px 22px rgba(239,68,68,0.28);
}
.od-umbrella::before {
width: 4px; height: 28px; background: #334155; top: 42px; left: 43px; border-radius: 2px;
}
.od-umbrella::after {
width: 16px; height: 14px; border: 4px solid #334155; border-top: 0; border-left: 0;
border-radius: 0 0 14px 0; top: 58px; left: 43px;
}