v149 · CSS · Shapes · demo

Clip Gallery

Eight shapes built with clip-path: shape() — hexagon, arrow, diamond, star, speech bubble, chevron, wave, and cross. Every shape uses percentage units so it scales with the element at any size. Click a shape to see its exact shape() code.

Chrome 149+ — shape() function. All shapes below use percentage coordinates and will scale proportionally at any element size.

Click any shape to see its shape() CSS · resize the viewport to confirm they scale correctly

⬡

Hexagon

6 line commands · 0 arcs

→

Arrow Right

7 line commands

◇

Diamond

4 line commands

✦

Rounded Star

10 curve commands

💬

Message Bubble

Lines + arc commands

❯

Chevron

6 line commands

Wave Bottom

Line + 4 curve commands

✚

Cross

12 line commands

shape() code — click a shape above

← click a shape to see its CSS

/* shape() vs polygon() — the key difference */
.element {
  /* polygon() — percent units, but straight lines only */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

  /* shape() — percent units AND curves AND arcs */
  clip-path: shape(
    from 50% 0%,
    curve to 100% 50% via 100% 10%, /* Bézier */
    arc to 50% 100% of 50%,         /* arc    */
    line to 0% 50%,
    close
  );
}
/* shape() commands: from, line, curve (cubic Bézier), arc, close */

see also