<svg width=0 height=0>
<clipPath id="heart" clipPathUnits="objectBoundingBox">
<path d="M0.5,1
C 0.5,1,0,0.7,0,0.3
A 0.25,0.25,1,1,1,0.5,0.3
A 0.25,0.25,1,1,1,1,0.3
C 1,0.7,0.5,1,0.5,1 Z" />
</clipPath>
</svg>
<div class="box"></div>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.box {
width: 300px;
height: 300px;
clip-path: url(#heart);
background-color: red;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.