Polygon clipping, with the points editable
Pick a shape or set the number of sides — and adjust every point by typing, not only by dragging.
Polygon clipping, with the points editable
Pick a shape or set the number of sides. Every point is in the table, so the shape can be adjusted by typing rather than only by dragging.
Clipping, masking and overflow are three different tools
They all make part of an element stop being visible, and they are not interchangeable. clip-path cuts along a geometric path with a hard edge, and everything outside it is simply gone. A mask uses the alpha or luminance of an image, so it can fade gradually — a soft vignette is a mask, not a clip. overflow: hidden only ever clips to the element's own box, which is why it cannot give you a diamond.
Reach for clipping when the edge is a shape you can describe in coordinates, and for masking when the edge needs to be soft or comes from artwork.
Clipping removes the clicks too
This is the behaviour worth knowing in advance, because as a bug it is baffling. A clipped-away region does not just disappear visually — it stops receiving pointer events entirely. A button clipped to a hexagon is only clickable inside the hexagon, and the corners that were cut away no longer respond to anything, even though the element's box is still nominally that size.
Most of the time this is exactly what you want, and it is the reason clipping is better than drawing a shape on top: the interactive area matches what people can see. It becomes a problem when a decorative clip on a wrapper accidentally trims the controls inside it, and the symptom is a control that is plainly visible and completely dead. If something has stopped responding for no apparent reason, check what is clipping its ancestors.
Percentages in a clip path resolve against the element's own reference box — the border box unless you say otherwise — not against the page or the viewport, so the same path scales with the element rather than staying a fixed size.
What clipping removes
Everything outside the polygon, including the element's background, its border and its box-shadow. A shadow on a clipped element is clipped away with it — put the shadow on a wrapper instead.
Percentages are relative to the element's border box, so the same polygon adapts to any size. That is usually what you want; a fixed-shape mask wants px instead.
Clipped areas do not receive pointer events, so a clipped button is only clickable inside the visible shape. That is generally correct and occasionally surprising.
Keep the content inside the shape
A triangle clipped from a rectangle removes two thirds of the usable area, and any text that was there goes with it. Padding has to be set for the visible region, not the box.
Accessibility of clipped shapes
Clipping is purely visual: the element keeps its size in the layout and its content in the accessibility tree. That is a good default, but it means a decorative clipped shape still needs aria-hidden if it carries no meaning.