CSS Clip Path Polygon Formatter🔒 100% local
Create clip-path polygon shapes. Privacy-first, no server uploads, no tracking.
Takes either the name of a preset shape or a comma-separated list of polygon points and prints a clip-path declaration, a numbered list of the points it recognised, and a note about the coordinate units. Fifteen presets are built in - triangle, diamond, pentagon, hexagon, octagon, star, parallelogram, trapezoid, rhombus, arrow-right, arrow-left, message, chevron, cross and one alias. Shape names are matched after lowercasing and stripping spaces.
How to use it
- Type a shape name such as hexagon, or a point list such as 50% 0%, 100% 50%, 50% 100%, 0% 50%.
- Press Process. Presets print under Shape: and custom points under Valid polygon with N points.
- Check the Structure list and the units note: the shape only behaves on resize if every coordinate uses the same unit.
- Copy Output takes the .shape rule and the notes.
Worked example
trianglebecomesShape: triangle
CSS:
.shape {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}Preset coordinates use the unitless form for zero values, exactly as stored in the preset table.
0 0, 100% 0, 50% 100%becomesValid polygon with 3 points.
CSS:
.shape {
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
Structure:
1. 0 0
2. 100% 0
3. 50% 100%
Warning: mixing % and px - coordinates resolve against the element box either way, but mixing makes the shape break when the element resizes. Prefer all-%.The warning is a defect: no px appears in that input. The tool warns whenever some coordinate values carry % and others do not, and it always calls the rest px.
When to use it
- Getting an exact preset polygon for a badge, ribbon or arrow without hunting through a shape gallery.
- Tidying a hand-written point list into a consistent format before pasting it into a stylesheet.
- Checking whether every coordinate shares one unit, which is what decides if the shape survives a resize.
What it does not do
- The units note is unreliable. Unitless zeros and percentages are reported as 'mixing % and px' (see the example above), and a genuinely mixed point like 50px 0% is counted as one percentage value rather than flagged per point.
- Fewer than three points is refused: '0 0, 100% 0' returns 'A polygon needs at least 3 points (got 2).'
- Coordinates must match a number optionally followed by %, px, em or rem, so vw, vh and calc() coordinates are rejected even though browsers accept them.
- There is no preview and no rendering. The output is the declaration plus text, so you still have to paste it somewhere to see the shape.