CSS clip-path generator

Clipping removes pixels, not just rounds them

clip-path hides everything outside a geometric region — the clipped area is gone from the painted output and from hit testing, so a link or button under the masked portion stops receiving clicks. That's the key difference from border-radius, which only softens the corners of a still- rectangular box. Clip-path can carve arrows, chevrons, diagonal section dividers, hexagon avatars and angled hero banners straight out of an element, with whatever sits behind it showing through the cut. The element still occupies its full box for layout; only its visible paint is reshaped.

The shape functions

polygon() takes a list of x y points, usually as percentages of the box, traced in order — three points for a triangle, more for arrows and chevrons. circle(r at cx cy) and ellipse(rx ry at cx cy) mask to a round region with an explicit centre. inset(t r b l round radius) insets a rectangle from each edge and can carry its own corner radii. Percentage coordinates make the shape fluid — it re-fits as the element resizes — while pixel values stay fixed regardless of box size.

Animation, hit-testing and fallbacks

Clip paths animate smoothly only between shapes of the same type and point count: morphing one polygon into another tweens point-by-point, but going from four points to six jumps. The reliable trick is to author both keyframes with equal point counts, doubling a vertex where you need one. Because clipped-away regions aren't clickable, keep interactive targets inside the visible shape. For older engines, design a sensible un-clipped fallback — a plain rectangle with the content still legible — since an unsupported clip-path simply shows the full box.