Clip Path Generator
Cut elements into triangles, hexagons, stars, arrows and more with clip-path. Fourteen ready shapes, live preview, copy the CSS.
Shapes
Tip: you can fine-tune any shape by editing the polygon points in the exported CSS.
.clipped {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}About the clip path generator
clip-path hides everything outside a shape you define. The polygon function takes a list of percentage coordinate pairs, and the browser connects them to form the visible region. Anything outside is clipped away, including backgrounds and images.
It is the cleanest way to make angled section dividers, hexagon avatars, arrow-shaped breadcrumbs and star ratings without a single image.
How to use it
- 1Pick a shape from the list.
- 2Check it against the dashed outline, which shows the original square footprint.
- 3Copy the CSS, then fine-tune the polygon points by hand if you need a variation.
Worth knowing
- Clipped areas are not clickable. The clipped region stops receiving pointer events too.
- clip-path can be transitioned between shapes with the same number of points.
- circle() and ellipse() are simpler than polygon() when you only need a round crop.
Questions
Does clip-path affect the element's layout box?
No. The element still takes up its full width and height in layout; only the painted area is clipped. Neighbouring content will not move into the clipped space.
Can I animate clip-path?
Yes, as long as both shapes use the same function and the same number of points. Otherwise the browser cannot interpolate between them.
Are clipped areas still clickable?
No. Pointer events are clipped along with the paint, which is usually what you want.