CSS clip-path Maker

Polygon handles drag → polygon() code

Shapes

4 points

Point #1

X %

Y %

Editor (drag handles)

Preview

CSS

clip-path: polygon(50.0% 0.0%, 100.0% 50.0%, 50.0% 100.0%, 0.0% 50.0%);

How to use

Select a preset shape or start with the default polygon in the SVG editor.
Drag the circular handles to reposition each vertex of the polygon.
Add a new point (inserted at the midpoint of the selected edge) or remove the selected point.
Fine-tune exact X/Y percentages in the coordinate inputs.
Copy the generated clip-path CSS and paste it into your stylesheet.

Examples

Dragging a triangle handle to 50% 0%, 0% 100%, 100% 100% produces clip-path: polygon(50.0% 0.0%, 0.0% 100.0%, 100.0% 100.0%).
Adding a point on the right edge of a rectangle and pulling it outward creates an arrow shape in real time.

Verify outputs before using in production. No warranty — see Terms.