A heart shape with modern CSS
Another classic shape made easy with the new shape() function. The heart shape with a simple code.
.heart {
aspect-ratio: 1;
clip-path:
shape(
from 50% 91%,
line to 90% 50%,
arc to 50% 9% of 1%,
arc to 10% 50% of 1%
);
}See the Pen Heart shape using shape() by Temani Afif (@t_afif) on CodePen.
For better support check this: Turn your image into a heart
More CSS Tips
- Polygon shapes with rounded corners Use modern CSS and Sass to generate the code of rounded polygon shapes.
- Hexagon shapes with rounded corners Use the new shape() function to create a hexagon shape with rounded corners.