css-shape.md

CSS shape() function

Chrome 135 and Safari 18.4 support CSS shape(), which will be the solution for responsive SVG paths.

clip-path: shape(from right center,
    line to bottom center,
    arc to top center of 50% 50% cw,
    line to right center);

• CSS Generators - A Polygon shape with clip-path
• 2025-04-29 — Blob shape with hover effect
• 2025-04-17 — Polygon shapes with rounded corners
• 2025-04-15 — The CSS shape() function
• 2025-04-08 — Use shape() for responsive clipping
• The shape() Function
• Demo
• shape() in Safari 18.4
• Demo animating corner-shapes (Chrome Canary 137.0.7109.0+)