one <div>
Heart
A rotated square and two circles on the pseudo-elements.
<div class="od od-heart"></div>
.od {
position: relative;
display: block;
box-sizing: border-box;
}
.od::before,
.od::after {
content: '';
position: absolute;
box-sizing: border-box;
}
.od-heart {
width: 56px; height: 50px; background: #e11d48; position: relative;
transform: rotate(-45deg) translate(8px, 4px); border-radius: 4px;
box-shadow: 0 10px 24px rgba(225, 29, 72, 0.28);
}
.od-heart::before, .od-heart::after {
width: 56px; height: 56px; background: #e11d48; border-radius: 50%;
top: -28px; left: 0;
}
.od-heart::after { top: 0; left: 28px; }