Clip Path Maker
Start from a ready shape or from your own points. Drag the white handles on the preview, or type exact percentages, then copy the clip-path.
Points of the polygon
The orange and purple fill is only there so you can see the shape. Percentages are measured from the top left corner of the element.
Worked examples
A diamond
Shape: Diamond
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
Four points at the middle of each side.
About Clip Path Maker
The clip-path property turns an ordinary rectangle into almost any shape: a hexagon avatar, an arrow, a slanted banner or a speech bubble. Writing the points by hand means guessing percentages and refreshing the page, which is slow. Here you can drag each point on a live preview and watch the code change.
Start from a ready shape such as a triangle, star, chevron or cross, or build a regular polygon with any number of sides. Drag the white handles or type exact percentages, add or remove points, and switch to circle, ellipse or rounded inset shapes when you need them. The output is one clean clip-path line.
How to use Clip Path Maker
- Pick a starting shape from the list.
- Drag the handles on the preview, or edit the percentages in the point list.
- Add or remove points to refine the outline.
- Copy the clip-path rule.
Common uses
- Shaping avatars and photos into hexagons or circles
- Cutting a diagonal edge on a hero section
- Drawing arrows, ribbons and tags without images
- Designing a custom shape for a button or badge
Frequently asked questions
How are the points measured?
Each point is a percentage across and a percentage down, measured from the top left corner of the element. Because they are percentages, the shape scales with the element.
Why can I not click the clipped-off parts?
Everything outside the clip is hidden and also stops taking clicks and hovers. That is usually what you want, but it also means shadows and borders outside the shape disappear, so draw those on a wrapper.
How many points do I need?
A polygon needs at least three. Simple shapes use three to six, a star uses ten, and a rounded blob-like outline needs many more. For curves, a circle, ellipse or inset with a corner radius is a better choice.
Does clip-path work in all browsers?
The polygon, circle, ellipse and inset forms work in all current browsers. Shapes written with path() are less widely used and are not offered here.