Shape() Notch Coupon Card

A promo/gift-card coupon with real semicircular bite notches cut into its left and right edges — the classic die-cut ticket-stub look — drawn entirely with the new CSS `clip-path: shape()` function, no SVG mask, no image, no JS. This is a genuinely different capability from the `polygon()` clip-path every site has been able to use for years: `polygon()` can only connect straight lines, so a curved bite out of an edge has always meant an SVG mask or a background-image cutout; `shape()` adds real path commands (`line to`, `arc to ... of <radius> <radius> ccw|cw small|large`, `curve to`, `close`) so the curve is drawn natively in the cascade. Real, current, cross-checked across independent primary/engineering sources (not a single blog's guess): the Chrome for Developers blog post 'Use shape() for responsive clipping' (developer.chrome.com/blog/css-shape, April 2025), web.dev's 'Paths, shapes, clipping, and masking' guide, and MDN's own `<basic-shape>`/`shape()` reference page all describe the same command syntax; MDN's own note states the feature reads as widely available across current browser versions as of February 2026. **Disagreement found and flagged, not glossed over:** the Chrome blog's original support table lists Chrome/Edge 135, Safari 18.4, and Firefox 148; a second independent source (a CSS tooling site's shape()-generator page, and CodePen's own November 2025 CSS challenge write-up) instead places Firefox only in Nightly, not yet shipped in stable, which conflicts with the Chrome blog's Firefox 148 claim — this run could not resolve the conflict at the primary source (MDN's own page is blocked by this environment's standing `EGRESS_BLOCKED` proxy rule, the same block every prior day's entries have hit), so Firefox support is stated as disputed rather than asserted either way; Chrome/Edge 135+ and Safari 18.4+ are the only versions treated as settled this run. **Verified the exact arc direction this run, not assumed from the spec text:** `arc to <point> of <rx> <ry> cw|ccw small|large` is easy to get backwards (the same radius/sweep combination can bite inward or bulge outward depending on the path's winding direction) — confirmed with a real rendered screenshot in this sandbox's pinned Chromium that `ccw small` is the combination that actually cuts a small concave notch into this card's clockwise-wound rectangle on both the left and right edges; `cw small` was tried first and renders no visible notch at all on this same path, so the value in the shipped CSS below is the one actually confirmed working, not the first guess. **Honest fallback, verified against spec behavior:** an unsupported browser treats the whole `clip-path: shape(...)` declaration as invalid and drops it at parse time, leaving `clip-path` at its initial value of `none` — the card just renders as an ordinary rounded-corner-free rectangle with its dashed divider intact, never broken or half-clipped, same cascade-guarded safety as this catalog's `corner-shape` and other bleeding-edge entries. No WebGL, no scroll-jacking, pure CSS-in-the-cascade — fits the DIY $999 tier as cleanly as it fits here, and a notched coupon/gift-card is a directly useful real component for the small local-business sites that tier sells to. Checked for overlap before building: `squircle-corner-shape-tile` uses the unrelated `corner-shape` property (which only reshapes a `border-radius` corner, not an arbitrary edge), and no other entry in this catalog uses `clip-path` at all — this is a genuinely new capability, not a tweak to an existing entry. (Vanilla example: live iframe preview + HTML/CSS tabs.)

<div class="csh-wrap">
  <div class="csh-coupon">
    <div class="csh-stub">
      <span class="csh-stub-pct">20%</span>
      <span class="csh-stub-label">OFF</span>
    </div>
    <div class="csh-main">
      <span class="csh-main-label">Use code at checkout</span>
      <span class="csh-main-code">FLOW20</span>
    </div>
  </div>
  <span class="csh-note">Needs Chromium 135+ / Safari 18.4+ for the notch cut — plain rectangular coupon card everywhere else</span>
</div>