v134 · css

CSS shape() function

shape() allows responsive free-form shapes in clip-path.

concepts

  1. shape()

    shape() — declarative geometry, semantic command names instead of raw <path>.

  2. Interpolated morphs

    The other half of why shape() shipped: clip-path that actually animates. Pick two presets, hit morph — when the command counts match you get a real tween, when they don’t you get a discrete swap.

  3. Path Builder

    Compose a shape() command-by-command: line, curve, arc, hline, vline, close. Tweak coordinates live, watch the clip-path redraw, and copy the generated CSS.

  4. Responsive Clip Gallery

    Six shape() clips that scale with element size — compared side-by-side with fixed-pixel path() equivalents. Scale slider and feature comparison table showing why % coordinates matter.

  5. Badge Kit

    Eight badge shapes — shield, hexagon, star, ribbon, burst, arrow, diamond, chat bubble — built with shape() using percentage coordinates. Drag the size slider; the badges scale perfectly at any dimension. Side-by-side comparison against path() equivalents that require separate pixel-tuned strings for each size.

  6. shape() vs path() comparison

    Five clip-path presets (notch, chevron, diamond, star, arrow) shown side-by-side in shape() and path() syntax. Both produce the same visual result; the comparison table shows where shape() wins (relative units, CSS variables, responsive) and where path() wins (universal browser support, SVG-compatible).

why it shipped

shape() allows responsive free-form shapes in clip-path.

references