✂️ CSS Clip-Path Generator

Pick a shape and see it applied live with CSS clip-path — triangle, arrow, hexagon, and more, ready to copy into your stylesheet.

Shape

Reading the coordinates

Every shape here is a stored clip-path value. In a polygon() the pairs are x y, as percentages of the element's own width and height, with 0% 0% at the top-left corner and the points listed in order around the outline:

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);   /* triangle  */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%,
                   75% 100%, 25% 100%, 0% 50%);   /* hexagon   */
clip-path: circle(50% at 50% 50%);
clip-path: ellipse(50% 40% at 50% 50%);

The triangle's three points are the top centre, the bottom-left corner and the bottom-right corner. Because the numbers are percentages, the shape restretches with the element rather than staying a fixed size - the hexagon on a wide box is a squashed hexagon, not a regular one.

Using the value

The clip is applied to the border box and it hides, rather than reflows. Surrounding text still flows around the original rectangle; shape-outside is the property that changes that.
Anything outside the shape stops receiving clicks, which makes clip-path a reasonable way to build oddly shaped buttons.
Circle radius percentages are not width percentages. circle(50%) resolves against √((w² + h²) / 2), so on a non-square box it will not touch the edges. ellipse() is the predictable one: its two radii track width and height separately.

Transitions between two polygons only animate if both have the same number of points. Repeat a coordinate to pad the shorter one out.

Frequently asked questions

How do I make a triangle with clip-path?

polygon(50% 0%, 0% 100%, 100% 100%) on any block element. The apex sits at the middle of the top edge and the base spans the full bottom edge.

Does clip-path work on images?

Yes, on the img element itself and on any element with a background. It clips the rendered box, so an image keeps its aspect ratio and simply has the outside of the shape cut away.

Why do my clipped corners look jagged?

clip-path edges are not always antialiased the way a border is, especially on near-horizontal diagonals. Nudging the element with a tiny transform, or using an SVG clipPath instead, usually cleans it up.