v149 · CSS · Shapes

Responsive Cutouts

clip-path: shape() with percentage units creates cutouts that scale with the element — no SVG, no fixed pixels, no geometry JavaScript. These shapes stay perfectly proportioned at any container size, from a 32px avatar to a 600px hero image.

All six shapes use percentage coordinates inside shape() — resize the browser window to confirm they scale correctly at any size.

Shape size 100px

Checking shape() support…

Hexagon

hex

shape(from 50% 0%, line to 100% 25%, …)

Arrow

→

shape(from 0% 25%, line to 60% 25%, …)

Diamond

◆

shape(from 50% 0%, line to 100% 50%, …)

Chevron

›

shape(from 0% 0%, …, line to 25% 50%, close)

Star

★

shape(from 50% 0%, line to 61% 35%, …)

Shield

▼

shape(… curve by … via … / …, close)

Why percentages matter in shape()
/* Old approach — polygon() with percentages works but lacks curves */
.hex { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }

/* New: shape() supports lines, arcs, AND curves — all in percentages */
.hex {
  clip-path: shape(from 50% 0%,
    line to 100% 25%,
    line to 100% 75%,
    line to 50%  100%,
    line to 0%   75%,
    line to 0%   25%,
    close);
}

/* Scales perfectly because % coordinates are relative to the element's box.
   No SVG viewBox, no pixel arithmetic, no JS. */

see also