Responsive clip paths without SVG
Complex clip paths used to require SVG path() definitions with fixed coordinates that don't scale responsively. The CSS shape() function uses responsive units like percentages and viewport units for truly flexible shapes.
2 clip-path: shape(
3 from 0% 100%,
4 line to 50% 0%,
5 line to 100% 100%
6 );
7}
2 clip-path: path(
3 'M0 200 L100 0 L200 200 Z'
4 );
5}
6
7/* Fixed pixel coordinates */
8/* Doesn't scale with element size */
Browser Support for clip-path
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Your first month is free
Managed WordPress hosting for faster sites.
Responsive by default
Use percentages, em, rem, vw — any CSS unit. The shape scales with the element, unlike fixed-coordinate SVG paths.
CSS-native syntax
No SVG path mini-language to learn. Uses familiar CSS commands: line, curve, arc, smooth, with readable coordinate pairs.
Animatable
Unlike path(), shape() can be animated and transitioned between different shapes smoothly with CSS animations.
How it works
The SVG path() function brought complex shapes to CSS clip-path, but it inherited SVG's fixed coordinate system. A path defined with M0 200 L100 0 L200 200 only works for a 200×200 element. Resize it, and the clipping breaks.
The CSS shape() function solves this by using standard CSS coordinates and units. You write from 0% 100%, line to 50% 0%, line to 100% 100% — readable, responsive, and animatable. It supports lines, curves (quadratic and cubic), arcs, and smooth joins, all with CSS units that scale with the element.