one <div>
Coffee
Cup body, handle and steam lines - one div only.
<div class="od od-coffee"></div>
.od {
position: relative;
display: block;
box-sizing: border-box;
}
.od::before,
.od::after {
content: '';
position: absolute;
box-sizing: border-box;
}
.od-coffee {
width: 54px; height: 48px; background: linear-gradient(180deg, #6b3f2a, #4a2818);
border-radius: 8px 8px 14px 14px; box-shadow: 0 12px 24px rgba(74,40,24,0.3);
}
.od-coffee::before {
width: 16px; height: 22px; border: 5px solid #4a2818; border-left: 0; border-radius: 0 14px 14px 0;
top: 12px; right: -16px;
}
.od-coffee::after {
width: 4px; height: 18px; background: rgba(255,255,255,0.45); border-radius: 4px;
top: -22px; left: 18px; box-shadow: 10px 2px 0 rgba(255,255,255,0.35), 20px -1px 0 rgba(255,255,255,0.3);
}