Path shapes without SVG clip paths
Creating non-rectangular clip paths used to mean SVG <clipPath> elements or path() with fixed pixel coordinates that break as soon as the element resizes. shape() brings path-style drawing to CSS using percentage units and responsive coordinates.
2 clip-path: shape(
3 from 0% 0%,
4 line to 100% 0%,
5 line to 100% 80%,
6 curve to 0% 80% via 50% 105%,
7 close
8 );
9}
2.hero {
3 clip-path: path(
4 "M 0 0 L 800 0 L 800 360
5 Q 400 420 0 360 Z"
6 );
7 /* Breaks on resize */
8}
Browser Support for
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Responsive units
shape() accepts percentages, calc(), and any CSS length. The shape scales with the element automatically.
No SVG required
No inline SVG, no <clipPath> element, no hidden SVG containers. The shape lives in CSS where it belongs.
Animatable
Unlike SVG clip paths, shape() supports CSS transitions and animations between compatible shapes.
How it works
The clip-path: path() function takes SVG path data, which uses absolute pixel coordinates. A path drawn for an 800px-wide element looks wrong at any other width. The workaround was SVG <clipPath> elements with clipPathUnits="objectBoundingBox" and 0–1 fractional coordinates — a complex setup hidden in HTML.
shape() brings path drawing commands directly into CSS with support for responsive units. from 0% 0% sets the starting point, line to 100% 0% draws a line, curve to draws a cubic Bézier, and close closes the path. Every coordinate can use percentages, vw, rem, or calc().
Support is Chrome 135+, Edge 135+, and Safari 18.4+. Firefox support is arriving in early 2026. This is an Interop 2026 focus area, so cross-browser coverage will improve throughout the year.