A heart shape with modern CSS 관련

CSS > Article(s)

---

Article(s)

• More CSS Tips

---

A heart shape with modern CSS

Use the new shape() function to create a heart shape with minimal code

Another classic shape made easy with the new shape() function. A heart shape with a simple code.

CSS-only heart shape

.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 Heart shape using shape() by t_afif on CodePen.

For better support check this: Turn your image into a heart

---

More CSS Tips

• Arc shape with rounded edges A modern way to create arc shapes with rounded edges using minimal code. May 20, 2025
• SVG to CSS Shape Converter The easiest way to convert an SVG shape into a CSS one. May 12, 2025
• Polygon shapes with rounded corners Use modern CSS and Sass to generate the code of rounded polygon shapes. April 17, 2025
• Hexagon shapes with rounded corners Use the new shape() function to create a hexagon shape with rounded corners. April 16, 2025

A heart shape with modern CSS

---

Use the new shape() function to create a heart shape with minimal code