What clip-path does
The clip-path property cuts an element into a shape, hiding everything outside that shape. The element remains a rectangle as far as the document is concerned — its box, its space, its content are unchanged — but only the clipped region is painted. This lets you display images and coloured blocks as triangles, hexagons, stars, circles and arbitrary polygons without editing the image itself.
How the polygon syntax works
The most flexible shape is the polygon, defined by a list of points. Each point is an X and Y coordinate expressed as a percentage of the element's width and height, and the browser draws straight lines between them in order, closing the shape at the end.
A triangle pointing up, for example, is three points: the top centre at 50 percent 0, the bottom left at 0 100 percent, and the bottom right at 100 percent 100 percent. Reading the coordinates this way, you can decode or hand-edit any polygon, though for anything with many points a generator is far quicker than plotting by hand.
Circles and ellipses
Beyond polygons, dedicated functions produce curved clips. The circle function takes a radius and a centre point, which is a cleaner way to crop an image into a circle than the border-radius trick, particularly because it clips the actual content rather than just rounding the box. The ellipse function does the same with separate horizontal and vertical radii.
The crucial advantage over images
You could achieve these shapes by editing images in a graphics program, so why use CSS? Because clip-path clips live content, not a static picture. A clipped element can contain real text that remains selectable and readable by screen readers. It can hold a background that changes on hover. It scales cleanly to any size without the pixelation of a raster image. And changing the shape means editing one line of CSS rather than re-exporting an asset.
This makes it ideal for decorative section dividers, angled layouts, image galleries with non-rectangular tiles, and hover effects that morph one shape into another.
Animation
Clip-path can be animated, and a polygon can smoothly transition into another polygon provided both have the same number of points. This is how the reveal and morph effects seen on modern sites are built — a shape that expands, a diagonal wipe, an element that unfolds. Matching the point count is the trick that makes the transition smooth rather than jumping.
Practical cautions
The clipped-away area is invisible but still occupies layout space, since the element's box is unchanged. Content near the clipped edges can be cut off, so leave padding. Clipping also hides overflow, which can clip a focus outline or a tooltip that extends beyond the shape. And while support is now excellent across current browsers, very old browsers ignore the property and show the full rectangle, so ensure the unclipped version is still acceptable as a fallback.
Generated in your browser
The shapes are applied live to the preview so you can see exactly how each one clips before copying the CSS.
Frequently Asked Questions
How does the polygon syntax work?
It lists points as X and Y percentages of the element's size. The browser draws straight lines between them in order and closes the shape.
Why use clip-path instead of editing the image?
It clips live content, so text stays selectable, backgrounds can change on hover, it scales without pixelation, and the shape is one line of CSS to change.
Can I animate a clip-path?
Yes. A polygon transitions smoothly into another polygon if both have the same number of points, which is how reveal and morph effects are built.
Does clipped-away content still take up space?
Yes. The element's box is unchanged, so leave padding near clipped edges to avoid cutting off content.
Is clip-path widely supported?
Support is excellent in all current browsers. Very old browsers ignore it and show the full rectangle, so keep that acceptable as a fallback.