Turn your image into a heart
Turn your favorite image into a Heart 💖 using a few lines of code
- No extra element (only the
<img>tag) - No pseudo-element
- Only two CSS declarations
img {
mask-border: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
clip-path: polygon(-41% 0,50% 91%, 141% 0);
}For better support we can rely on mask
img {
mask:
radial-gradient(at 70% 31%,#000 29%,#0000 30%),
radial-gradient(at 30% 31%,#000 29%,#0000 30%),
linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
clip-path: polygon(-41% 0,50% 91%, 141% 0);
}See the Pen CSS only heart images by Temani Afif (@t_afif) on CodePen.
Related Article: verpex.com/blog/website-tips/css-shapes-the-heart