v134 · css

Responsive Clip Gallery

The CSS shape() function accepts percentage coordinates that scale with the element. Compare how shape() clips stay proportional as elements resize, while path() (fixed-pixel) clips break. Resize the demo box or adjust the scale slider.

checking CSS shape()…

clip-path: path("M 0 0 L 100 0 …") uses absolute px coordinates — a 100px triangle stays 100px regardless of element size. clip-path: shape(from 0% 0%, line to 100% 0%, …) uses percentages that scale with the element. This makes shape() ideal for responsive designs.

Shape gallery — all scale with element size

Resize comparison

Drag the right edge of the box to resize. The shape() clip tracks the element; the path() clip stays fixed.

Scale: 100%

shape() — responsive new

clip-path: shape(…% …%)

path() — fixed pixels

clip-path: path("M 0 0 L …px …px")

shape() vs path() — feature comparison

Feature	shape()	path()
Coordinates	%, em, vw, calc() — any CSS length	px only (SVG user units)
Responds to element resize	Yes — % tracks element size	No — fixed shape, clips differently at every size
CSS variables	Yes — `shape(from var(--x) var(--y), …)`	No — path string is opaque to CSS
Animation / @keyframes	Yes — interpolates per-point	Limited — same point count required
Curved segments	curve, arc, smooth commands	C/Q/A SVG path commands
Browser support	Chrome 134+	Widely supported (Chrome 88+)

Code example

/* path() — fixed pixels, breaks on resize */
.card-path {
  clip-path: path("M 0 0 L 200 0 L 200 150 L 160 180 L 0 180 Z");
  /* If card is 400px wide, the notch stays at 160px — wrong */
}

/* shape() — percentage coords, scales with element (Chrome 134+) */
.card-shape {
  clip-path: shape(
    from 0% 0%,
    line to 100% 0%,
    line to 100% 75%,
    line to 80% 100%,   /* notch always at 80% of width */
    line to 0% 100%,
    close
  );
}

/* With CSS custom properties for parameterisation */
.card-variable {
  --notch: 20%;
  clip-path: shape(
    from 0% 0%,
    line to 100% 0%,
    line to 100% calc(100% - var(--notch)),
    line to calc(100% - var(--notch)) 100%,
    line to 0% 100%,
    close
  );
}