How to Build a CSS clip-path Polygon by Dragging Points

A polygon() clip-path is a list of points, each written as an x% y% pair measured from the top-left corner of the element. The browser joins them in order and closes the last point back to the first. Clip-path generator lets you place those points by dragging instead of typing, and shows the cut on a real picture while you do it. Here is how to get from a blank page to a value you can paste.

Step 1 - start from the closest preset

Choose Polygon as the shape type, then pick the preset nearest to what you want: triangle, trapezoid, parallelogram, pentagon, hexagon, star, message bubble or chevron. Starting close saves most of the dragging. A slanted hero edge, for example, is a trapezoid with two points moved; an arrow tag is a chevron with one point pulled in. The tool opens with the Hexagon preset applied to an example photo drawn in the page. "Start fresh" switches to the tool's plain default, the message bubble, and remembers that choice; "See an example" brings the hexagon back.

Step 2 - drag, then fine-tune

Drag any handle on the preview and the cut and the CSS update together. For exact placement, focus a point and use the arrow keys: each press moves it 0.5%, and holding Shift moves it 5%. The numeric fields behind "Point coordinates" let you type a value directly, which is the fastest way to snap a point to a round number like 50%. Every value is printed with one decimal, so a dragged point reads 37.5%, not a long fraction.

Points are clamped between 0% and 100% on both axes. A point sitting on 0 or 100 is fine: that part of the shape simply touches the edge of the box.

Step 3 - add or remove points where the shape needs them

"Add a point" puts the new point in the middle of the longest edge, which is usually where you want extra control. A polygon here holds up to 12 points and never fewer than three; the tool tells you when you hit either limit rather than silently ignoring the click. If you plan to animate between two shapes later, decide the point count now. Two polygons only animate smoothly when they have the same number of points, so a rectangle that will morph into a six-point chevron should also be built with six.

Watch the order as you add points. The browser connects them in list order, so dragging point 4 across to where point 2 lives does not move the corner, it folds the shape over itself. If an edge suddenly crosses the middle of your shape, that is what happened.

Step 4 - read the plain-language line, then copy

Under the preview, "What this shape does" describes the result in words, such as how far across and down the shape reaches. If your values leave nothing visible, it says the values clip the whole box away, so you are not left wondering why the preview went blank. Then copy the CSS with the button and paste it onto your element.

The other three shape types, and one detail about circles

Circle, Ellipse and Rectangle (inset) use sliders and handles instead of free points. Two details are worth knowing. The inset's corner rounding goes from 0 to 50%, and the round part only appears in the output when it is above zero, so a square inset stays a short line. And a circle's radius percentage is not measured against the width: CSS resolves it against the box's diagonal divided by the square root of two. On a square box that equals the side length, but on a wide box circle(50%) is larger than half the width. Ellipse radii are measured against width and height separately, so use an ellipse when you need the shape to track the box's proportions exactly. The radius slider goes up to 150%, which is valid and simply clips nothing.

For the reasons to reach for clip-path at all, see the background. For a complete real job, with the border and shadow problems it brings, see the hexagon profile photo guide. Or open the generator.