Clip-path

What it's for

Cut an element down to a shape with the CSS clip-path property: a triangle, a chevron for a banner, a star, a circle or a rounded rectangle. Anything outside the shape is hidden, along with clicks on it. This tool draws the shape on a sample box and writes the CSS for it.

For example, when you want the bottom of a hero image cut at an angle, start from a preset, drag the points, and copy the polygon().

How to use it

Pick a Shape, or a preset to start from. For a Polygon, the square shows a handle on each point. Drag a handle, or Tab to one and press the arrow keys to move it 1% (with Shift, 10%). The Points box lists them as percentages of the box and can be edited directly, so it works without a mouse or a touch screen. Add a point puts a new one halfway to the next; Remove deletes the selected one (three are the least).

Circle and ellipse take a centre and radii, and Inset takes how far in each side is cut, with rounded corners if you like, all as percentages. The shape, points and numbers are remembered in this browser.

Example

Choose the Star preset, then press Tab to the first handle and press Down arrow three times. The CSS box shows:

clip-path: polygon(50% 3%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

Good to know

Percentages follow the size of the element they are used on, so the shape stretches with it. It doesn’t write path() shapes, which have fixed pixel sizes. The preview box is square; a wide or tall element is stretched accordingly. A clipped element can’t show a border or shadow outside the shape, and the clipped-off part can’t be clicked.