How polygon points are joined in order
The polygon() function in clip-path joins the points you list in order to form an outline and keeps only the inside. Coordinates are percentages of the element box, with 0% 0% at the top left. This tool reads the points line by line, writes the declaration, and applies the same values to the preview box.
A tangled order breaks the shape
If the points do not follow the outline, edges cross and a rectangle turns into a bow tie. Every pair of edges is tested here and the two crossing edge numbers are reported, and points that lie on one straight line with zero area are rejected too. The area comes from the shoelace formula, shown as a percentage of the element box (W3C CSS Masking specification, as of October 2026).
What it does not do
It does not write the other shape functions such as circle, ellipse and inset, nor path() with an SVG path. Coordinates in px are not supported either; only percentages are used. For older Safari, -webkit-clip-path is written alongside with the same value.
Frequently Asked Questions
Edges join the points in the order written. An order that does not follow the outline makes edges cross, turning a rectangle into a bow tie.
The syntax allows it, but those parts fall outside the element box and stay invisible. This tool allows it and reports how many points are outside.
Current browsers work with the standard property alone. If you also support older Safari, writing the same value on the prefixed property is safer.