v134 · css

Badge Kit

Eight badge shapes — shield, hexagon, star, ribbon, burst, arrow, diamond, chat bubble — all built with shape() using responsive percentage coordinates. Resize the badges with the slider; the shapes scale perfectly. Compare against path() equivalents that break at different sizes.

Feature detection: checking…

Badge size: 72px

shape() badge kit — responsive % coordinates hover to preview

Shield

Hex

Star

Ribbon

Burst

Arrow

♦

Chat

shape() vs path() — key difference

/* shape() — percentage coordinates, scales with element size */
.badge-shield {
  clip-path: shape(
    from 50% 0%,
    line to 100% 15%,
    line to 100% 55%,
    curve to 50% 100% with 100% 80% / 75% 100%,
    curve to 0% 55% with 25% 100% / 0% 80%,
    line to 0% 15%,
    close
  );
}

/* path() — fixed px coordinates, only works at one specific size */
.badge-shield-path-72px {
  clip-path: path('M 36 0 L 72 10.8 L 72 39.6 C 72 57.6 54 72 36 72 C 18 72 0 57.6 0 39.6 L 0 10.8 Z');
  /* 🚫 Breaks at any other size — need a different path for 48px, 96px, etc */
}

shape() vs path() — both at 48px, 72px, 96px

shape() — same rule, any size

One clip-path: shape(…) rule.
Percentages adapt to element dimensions.

path() — hand-tuned px per size

Three separate path() strings.
Each one pixel-tuned for that exact size.

/*
  shape() coordinates are percentages — the path scales with the element.
  A single rule works at 48px, 72px, 120px, or whatever size is needed.

  Compared to path() which requires hardcoded pixel values that only
  match one exact element size.
*/

/* 5-pointed star — works at any element size */
.badge-star {
  clip-path: shape(
    from 50% 2%,
    line to 63% 35%,
    line to 98% 35%,
    line to 70% 57%,
    line to 82% 91%,
    line to 50% 70%,
    line to 18% 91%,
    line to 30% 57%,
    line to 2% 35%,
    line to 37% 35%,
    close
  );
}

/* Animated transition between shapes — same command count = smooth tween */
.badge-star:hover {
  clip-path: shape(
    from 50% 0%,
    line to 65% 30%,
    line to 100% 30%,
    line to 72% 55%,
    line to 85% 90%,
    line to 50% 68%,
    line to 15% 90%,
    line to 28% 55%,
    line to 0% 30%,
    line to 35% 30%,
    close
  );
  transition: clip-path 0.3s ease;
}

see also