CSS clip-path shapes

12 polygons that scale with the box.

Triangle
3 points. Percentages follow the size of the box.
```
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
```
Trapezoid
4 points. Percentages follow the size of the box.
```
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
```
Parallelogram
4 points. Percentages follow the size of the box.
```
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
```
Rhombus
4 points. Percentages follow the size of the box.
```
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
```

Pentagon

5 points. Percentages follow the size of the box.

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

Hexagon

6 points. Percentages follow the size of the box.

clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);

Octagon

8 points. Percentages follow the size of the box.

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

Star

10 points. Percentages follow the size of the box.

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

Arrow

7 points. Percentages follow the size of the box.

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

Cross

12 points. Percentages follow the size of the box.

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

Message

7 points. Percentages follow the size of the box.

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

Chevron

6 points. Percentages follow the size of the box.

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

Using the shapes

Each shape is a polygon() of points in percentages, so it scales with the element. For a regular looking hexagon or star, give the element a box with suitable proportions (a square for the star, a box about 1.15 times as wide as tall for the hexagon). All of them were accepted by current Chrome and WebKit on 13 November 2026.

Remember that everything outside the shape is cut away, including shadows, and that the cut-away part does not take clicks. The guide explains both, and the generator lets you try each shape on a live box.

This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.

All generators Guides

CSS clip-path shapes

Triangle

Trapezoid

Parallelogram

Rhombus

Pentagon

Hexagon

Octagon

Star

Arrow

Cross

Message

Chevron

Using the shapes

Related pages