Polygon Shapes

Draw custom silhouettes with polygon() point lists.

Points around the box

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

triangle

◇

diamond

hex

hexagon

Important HTML

The same swatch element can take a polygon clip.

<div class="swatch swatch-triangle">▲</div>

Important CSS

Polygon points walk around the visible silhouette.

.swatch-triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.swatch-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}