shape()

A function used in 'clip-path' and other properties to define custom 2D shapes using commands like 'move', 'line', and 'curve'. It's basically like writing SVG paths directly in CSS.

This is an experimental technology. The syntax and behavior are still subject to change.

/* Usage Example */
.custom-bg {
  /* Defines a triangle using the shape() function */
  clip-path: shape(from 0 0, line to 100% 0, line to 50% 100%, close);
}
Limited availability Since 2020 0% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Interop 2026 focus area ? Learn more →
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC