Free · no signup
CSS Clip-Path Generator
Drag polygon vertices to shape any element. Common shapes (triangle, hexagon, arrow, parallelogram) plus custom polygons up to 12 points.
Editor · drag handles, double-click edge to add
Drag handles to move. Double-click a handle to insert a new point after it. Right-click a handle to delete it.
Preview
6 vertices · 6 more allowed
Shapes
CSS
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);