The four shape functions
| Function | Good for |
| --- | --- |
| polygon() | anything angular — arrows, chevrons, diagonal section edges |
| circle() | circular crops and reveal animations |
| ellipse() | wide soft crops, curved section dividers |
| inset() | rectangular crops, optionally with rounded corners |
inset() is the one people forget. It is the simplest way to trim a fixed margin
off an element, and it takes a round keyword for corner radii.
Diagonal section edges without an image
The most common real use is an angled boundary between two full-width sections:
.section {
clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
That is a rectangle with the bottom-right corner pulled up 8%. No image, no SVG mask, and it scales to any viewport width.
Layout is untouched
This surprises people. A clipped element still takes its full width and height in the flow, so a triangle clipped from a 400 px box still reserves 400 px. Use negative margins to close the visual gap, or accept the space.
Falling back
clip-path is supported in every current browser. In something ancient, the
element simply appears unclipped — a full rectangle. That is a safe failure mode
for decoration and a bad one if the clip is hiding something, so never rely on it
to conceal content.
Export as SVG
The polygon can be downloaded as an SVG path, which is useful when the same shape is needed as a mask, an icon, or in a design tool. Everything is generated in your browser.
Questions
Does clip-path affect layout?+
No. It clips what gets painted, not what gets laid out — the element still occupies its whole box, and surrounding content flows around the full rectangle. If you want text to wrap to the visible shape, you need `shape-outside` as well.
Do clipped areas still receive clicks?+
No, and this is one of the genuinely useful side effects. Pointer events stop at the clip boundary, so a triangular button is only clickable inside the triangle.
Percentages or pixels?+
Percentages, in almost every case. They are relative to the element's own box, so the shape scales correctly when the element resizes. Pixel coordinates break the moment the layout is responsive.
Can I animate a clip-path?+
Yes, between two polygons with the same number of points — the browser interpolates each point. Different point counts do not animate, which is why it is worth padding the simpler shape with duplicate points rather than reaching for a library.