CSS Clip Path Generator
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);The CSS clip path generator produces clip-path rules for nine shapes, triangle, trapezoid, rhombus, pentagon, hexagon, star, circle, ellipse and a message bubble. Coordinates are in percentages, so the shape scales with the element rather than being fixed to a pixel size.
How it works
clip-path hides everything outside the shape you define. The element still occupies its full layout box and still receives pointer events only inside the visible region, which is the behaviour that makes it useful for irregular buttons.
- polygon() takes a list of x y coordinate pairs. Percentages are relative to the element box, so 50% 0% is the top centre.
- circle() takes a radius and a centre. Circle(50% at 50% 50%) is an inscribed circle.
- ellipse() takes two radii and a centre, allowing a non-circular oval.
- Coordinates run clockwise by convention, though the browser does not require it.
Examples
A hexagon
Shape
Hexagon
Result
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Six points, starting at the top left and running clockwise. Because every coordinate is a percentage, the hexagon keeps its proportions at any element size.
A speech bubble
Shape
Message
Result
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
The rectangle occupies the top 75 percent and the tail is cut between the 50 and 75 percent marks on the bottom edge. Nothing can be drawn in the lower quarter except the tail.
Frequently asked questions
Does clip-path change where an element sits in the layout?
No. The element keeps its full layout box, so neighbours position against the unclipped rectangle. Clipped-away regions are invisible and do not receive clicks, but they still occupy space.
Why does my clipped shape distort when the element resizes?
Because percentage coordinates are relative to each axis independently. A shape that is a regular hexagon in a square element becomes a stretched hexagon in a wide one. Fix the aspect-ratio of the element if the shape must stay regular.
Can I animate a clip-path?
Yes, between two polygons with the same number of points, the browser interpolates point by point. Polygons with different point counts do not interpolate and will snap instead. Pad the simpler shape with duplicate points to match.
When should I use clip-path instead of the border triangle trick?
Whenever the shape is more than a simple triangle, or when you need it to scale with the element. The border trick is fixed in pixels and limited to triangles, but works in environments like email HTML where clip-path support is unreliable.