CSS shape() Makes Responsive Paths Easier

clip-path: polygon() is good until a shape needs a curve. At that point an SVG path is the usual escape hatch, but its coordinates do not naturally follow an element’s changing size.

CSS shape() fills that gap. It describes a path with drawing commands and can use percentages and custom properties, so the result can remain responsive.

Draw a shape in CSS

This clips a card into a pointed panel:

.card {
  clip-path: shape(
    from 0 0,
    line to 100% 0,
    line to 100% 80%,
    line to 50% 100%,
    line to 0 80%,
    close
  );
}

Read it as a set of instructions: start at the top-left, draw each line, then close the path. The percentages are resolved against the element, so the point moves when the card changes size.

For that exact example, polygon() is shorter:

.card {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 80%,
    50% 100%,
    0 80%
  );
}

I would keep the polygon. shape() becomes worth the extra syntax when the path needs curves or reusable values.

A badge that scales with its box

.badge {
  width: 10rem;
  aspect-ratio: 1;
  clip-path: shape(
    from 50% 0,
    line to 100% 35%,
    line to 82% 100%,
    line to 18% 100%,
    line to 0 35%,
    close
  );
}

The same path works if the badge becomes larger or smaller. This is much nicer than recalculating absolute SVG coordinates for every breakpoint.

The clipping path does not reflow content

A clipped element keeps its rectangular layout box. Text does not politely avoid the missing corners, and the hit area may not match what the shape suggests.

Give content enough padding and test focus outlines, links, and pointer behaviour. Decorative clipping should not turn the last word into collateral damage.

Keep a rectangular fallback

shape() is still newer than the more familiar clipping functions. Use it as an enhancement:

.card {
  border-radius: 1rem;
}

@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {
  .card {
    border-radius: 0;
    clip-path: shape(...);
  }
}

CSS is a good home for a responsive decorative path. For a detailed illustration or something a designer needs to edit visually, I would still use SVG. Native does not automatically mean simpler.