v135 · css

Clip-path Gallery

Nine hand-crafted clip-path: shape(…) definitions — arrows, hexagons, stars, speech bubbles, chevrons, tabs, and more. Click any tile for an inspector that shows the exact path commands. Switch colours to see how the silhouettes pop against different backgrounds.

Feature detection: checking…
Fill: 
/* shape() creates a path for clip-path, like SVG but in CSS */
.arrow {
  clip-path: shape(
    from 0% 50%,
    line to 60% 0%,
    line to 60% 30%,
    line to 100% 30%,
    line to 100% 70%,
    line to 60% 70%,
    line to 60% 100%,
    close
  );
}

/* Bezier curves are supported too */
.shield {
  clip-path: shape(
    from 50% 0%,
    line to 100% 20%,
    curve to 100% 60% with 100% 40%,
    curve to 50% 100% with 80% 90%,
    curve to 0% 60%   with 20% 90%,
    curve to 0% 20%   with 0% 40%,
    close
  );
}

see also