$megatools --clip-path-generator --client-side
CSS Clip-Path & Polygon Shape Generator
Interactive visual drag-and-drop CSS clip-path polygon generator with presets for hexagons, stars, and chevrons.
1
2
3
4
5
6
Theme:
Standard CSS Rule:
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
Tailwind CSS Arbitrary Value:
[clip-path:polygon(50%_0%,100%_25%,100%_75%,50%_100%,0%_75%,0%_25%)]
Vertex Coordinate Points:
P1:50%, 0%
P2:100%, 25%
P3:100%, 75%
P4:50%, 100%
P5:0%, 75%
P6:0%, 25%