Design · 4 min read
CSS Shapes with clip-path
For years, non-rectangular shapes on the web meant images or awkward CSS hacks. The clip-path property changed that: it cuts an element into any shape you can describe, with no images involved.
This guide covers the shape functions, why percentages make shapes responsive, and the limitations worth knowing before you ship.
Try it yourself with the related tool.
Build a clip-path →Advertisement
The four shape functions
polygon() takes a list of x/y points and is the most flexible — triangles, hexagons, stars, arrows, angled section dividers. circle() and ellipse() take a radius (or two) and a centre point. inset() crops in from each edge and optionally rounds the corners.
Percentages make it responsive
Coordinates are measured against the element's own box, so if you use percentages the shape scales with the element automatically. The same clip-path works on a small card and a full-width hero with no adjustment — which is why percentage coordinates are almost always the right choice.
The gotchas
Clipping hides everything outside the shape — including box-shadow, which is the most common surprise. If you need a shadow, put it on a wrapping parent element. Clipped areas also stop receiving clicks, which matters for buttons and links. And the content is only visually cut, not reflowed, so text can still overflow into invisible regions.
Where it shines
Angled or curved section dividers, hexagonal avatars, decorative image masks, and hover reveals all become simple. For animated shape transitions, note that you can only smoothly animate between polygons with the same number of points.