CSS clip-path Guide: Build Polygon Shapes and Avoid the Common Pitfalls

The CSS clip-path property hides everything outside a shape you define. The element still exists as a normal rectangular box, but only the part inside the shape is painted. That makes it the simplest way to get hexagon avatars, arrow-shaped buttons, diagonal section edges and star badges without an image editor or an SVG file. This guide explains how the polygon() coordinate system works, how to generate shapes with our CSS Clip-Path / Shape Maker, and the behaviours that surprise people the first time: clipped shadows, dead clicks outside the shape, and animations that refuse to animate.

Every output quoted below was copied from the tool after setting the values described, and the behaviours in the pitfalls section were checked in a Chromium browser.

How polygon() coordinates work

A polygon is a list of points joined in order, with the last point joined back to the first. Each point is an x y pair measured from the top-left corner of the element's box. 0% 0% is the top-left, 100% 0% the top-right, 100% 100% the bottom-right and 0% 100% the bottom-left. Y grows downward, which is the opposite of school graph paper.

Using percentages means the shape scales with the element. A diamond is just the four edge midpoints:

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Pixel values work too, and you can mix units (polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%) gives a slanted bottom edge with a fixed 40px drop), but the tool only produces percentages. Percentages are the right default for a generator, since the same shape then fits any box size.

Point order matters in one practical way: the points should follow the outline without crossing over themselves. If two edges cross, the browser fills the result using a fill rule (nonzero by default), which can leave unexpected holes or bow-tie shapes.

Generating a shape, step by step

1. Under Shape Type, choose Polygon, Star, Arrow or Trapezoid.
2. Adjust the controls that appear for that shape (listed in the next section).
3. Pick a colour with Fill Color. It is only there so the preview has something to show; it ends up in the output as a background-color line you can delete or replace.
4. Watch Live Preview. The shape is drawn on a 220 by 220 pixel box, and the CSS is rewritten on every change.
5. Click Copy CSS and paste it into a rule for your element. Give that element a width and height, or the shape has nothing to cut.

The default output is:

background-color: #db2777;
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);

Values are rounded to two decimal places, so you will see numbers like 93.3% and 97.55%. That precision is plenty; sub-pixel differences are invisible.

What each shape type gives you

Polygon has one slider, Sides, from 3 to 12. Points are spaced evenly on a circle that touches the box edges, starting at the top. A few real results:

• 3 sides: polygon(50% 0%, 93.3% 75%, 6.7% 75%). The triangle only reaches 75% of the box height, because it is inscribed in a circle. If you want a triangle that fills the box, write polygon(50% 0%, 100% 100%, 0% 100%) by hand.
• 4 sides: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%). This is a diamond, not a square. For a rotated square you do not need clip-path at all.
• 8 sides: an octagon, polygon(50% 0%, 85.36% 14.64%, 100% 50%, 85.36% 85.36%, 50% 100%, 14.64% 85.36%, 0% 50%, 14.64% 14.64%).

Star has Spikes (3 to 12) and Point Depth (10% to 80%). Depth is the inner radius as a percentage of the outer one, so a smaller number gives sharper, thinner points. The defaults (5 spikes, 45%) produce a classic five-point star with ten coordinates. Moving to 6 spikes and 30% depth gives a thin six-pointed star: polygon(50% 0%, 57.5% 37.01%, 93.3% 25%, 65% 50%, 93.3% 75%, 57.5% 62.99%, 50% 100%, 42.5% 62.99%, 6.7% 75%, 35% 50%, 6.7% 25%, 42.5% 37.01%).

Arrow has a Direction (Right, Left, Up, Down) and Thickness (10% to 49%). The right-pointing default is polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%), a seven-point outline. One thing to know: the thickness number is measured from the centre line outward, so the shaft is about twice the displayed value. At 30% the shaft spans from 20% to 80% of the height, which is 60% of the box. At the maximum of 49% the shaft is 98% of the height, so the arrow looks like a block with a small pointed end. At 10% it spans 40% to 60%, a slim 20% shaft.

Trapezoid has one slider, Top Width (0% to 100%). At 50% you get polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%). At 0% the top collapses to a point (a triangle that does fill the box), and at 100% it becomes a plain rectangle, which is a handy way to confirm the control is doing what you think.

Pitfalls that catch people out

Shadows and borders get clipped too

clip-path cuts off everything the element paints, including its own box-shadow, border and outline. In a test, a hexagon with box-shadow: 0 20px 30px #000 showed no shadow at all: the pixel just below the shape was still pure white. The standard fix is a wrapper. Put the drop-shadow() filter on a parent element and the clip-path on the child:

.shape-wrap { filter: drop-shadow(0 20px 10px rgba(0, 0, 0, 0.5)); }
.shape      { clip-path: polygon(...); }

In the same test, the wrapper version rendered a grey shadow under the hexagon. For borders, the usual trick is to stack two shapes: a slightly larger one in the border colour behind a smaller one in the fill colour. You can build the second shape with the same tool by using the same settings and inset it with a smaller box.

Clicks outside the shape do nothing

The clipped-away area is not only invisible, it also stops receiving pointer events. We checked with elementFromPoint on the default hexagon: a point near the corner of the box (3% across, 3% down) did not hit the element, and a point in the centre did. For a button this is usually what you want, since the clickable area matches what you see. It can surprise you if you rely on the full rectangle as a hit target, for instance a thin diagonal strip that becomes hard to tap on a phone. Make interactive clipped shapes large enough to hit.

The box still takes up its full space

Clipping changes what is painted, not layout. A 220 by 220 hexagon still pushes neighbours as if it were a 220 by 220 square, and text inside it is cut off at the shape edge rather than wrapping. Leave padding so text stays inside the safe area, which is roughly the inner rectangle of the shape.

Animating between shapes

You can transition clip-path smoothly, but only when both shapes have the same number of points. In a test, a transition from a 4-point square to a 4-point diamond showed an in-between shape halfway through, while a transition from the same square to a 6-point hexagon jumped straight to the end shape. Because this tool outputs 6 points for the default polygon and 10 for a five-spike star, copying two outputs and transitioning between them will snap rather than animate. To morph, pad the shape with fewer points by repeating a point (for example write a triangle with four points, repeating one corner), so both lists are the same length.

What the tool does not produce

The tool only writes polygon(). CSS also supports circle(), ellipse(), inset() (with rounded corners) and path(), which you would write by hand. There is no drag-the-points editor, so a custom outline means editing the copied coordinates yourself. The output also has no -webkit- copy of the property. Current versions of the major browsers support the unprefixed property; if you must support very old Safari, add -webkit-clip-path with the same value.

Practical uses

• Hexagon or octagon avatars. Apply the polygon to a square img with object-fit: cover.
• Arrow-shaped step indicators. Use the Right arrow output on breadcrumb or progress steps, with a lower thickness for a slimmer look.
• Angled section edges. A trapezoid or a hand-edited polygon such as polygon(0 0, 100% 0, 100% 90%, 0 100%) gives a slanted bottom on a hero block. For wavy edges, the Wave Divider Generator is a better fit.
• Star ratings and badges. A five-spike star at around 45% depth reads clearly at small sizes.
• Reveal effects. Start with a collapsed shape (all points at the centre) and transition to the full one, keeping the point count identical.

For plain triangles built from borders, see the CSS Triangle Generator; for organic rounded shapes, the Blob Generator.

Privacy

The shape maths runs in your browser. The page's script contains no network calls apart from the optional Contact form, and we saw no requests to other sites while changing shapes (page styling and icons are loaded from a public CDN when the page opens). You are not uploading anything; the tool only produces text.

Quick answers

Why does nothing show when I paste the CSS? The element needs a size and a visible background. An empty div with no height is zero pixels tall, so there is nothing to clip.

Does clip-path work on images? Yes, on any element. For an image, the clipped part simply disappears and the surrounding page shows through.

Clip-path, mask or overflow: hidden? Use overflow: hidden for rectangles and simple rounded corners, clip-path for hard-edged geometric shapes, and mask when you need soft or partially transparent edges.

Can I make the shape responsive? Percentages already scale with the element, so resize the element (for instance with aspect-ratio) and the shape follows.