Rounded Polygon Price Tag

A classic pointed price/sale tag shape (the 'tag with a notch on the left' silhouette) with every corner — including the point — evenly rounded, drawn with a single `clip-path: polygon(round <length>, ...)` declaration and nothing else: no SVG, no image, no hand-rolled Bezier math. This is a genuinely new capability, not a tweak to this catalog's existing shape entries: `polygon()` has connected straight lines for years but every corner has always come out sharp; getting a *rounded* corner on an arbitrary (non-rectangular, non-4-sided) polygon has always meant either an SVG `path`/mask or approximating the curve by hand with several extra points, because plain CSS `border-radius` only works on a box's own 4 corners, not on clip-path vertices. The new `round` keyword fixes that: one radius value after `round` rounds every vertex of the polygon uniformly, in the cascade. **Real, current, cross-checked across independent sources** (not a single blog's guess): Chrome's own 'Chrome 150' release notes and its earlier 'Chrome 150 beta' post (developer.chrome.com, via `WebSearch` aggregation — this run's own direct `WebFetch` to developer.chrome.com hit this sandbox's standing `ENOTFOUND` egress block, the same block every prior day's entries have logged, so this rests on cross-checked `WebSearch` snippets, not a direct primary-source read) list the optional polygon() corner-rounding parameter under Chrome 150's CSS/UI changes, stable 2026-06-30/07-01; Microsoft's own Edge 150 web-platform release notes independently corroborate the same feature landing in Edge 150; MDN's `polygon()` CSS function reference page documents the exact syntax used here — a `round <length>` clause before the vertex list, e.g. `polygon(round 20px, 0% 0%, 50% 50%, 0% 100%)`. **Honest gap, stated plainly:** a third independent source (css-tip.com's 'A New Way to Round the Corners of CSS Shapes', checked via WebSearch) calls the feature Chromium-only for now and flags that Firefox/Safari support should be checked before relying on it — this run could not reach caniuse.com directly (same egress block) to pin exact non-Chromium version numbers, so Firefox/Safari are treated as unconfirmed rather than asserted either way; a related `web-features` tracker GitHub issue (web-platform-dx/web-features#4429) independently confirms the feature is new enough that the community's own browser-support tracker doesn't yet have a dedicated entry for it (it's presently folded into the unrelated `shape-function` entry for `shape()`). Checked for overlap before building: `shape-notch-coupon-card` (day 30) uses the different `clip-path: shape()` function with explicit `arc to` commands to cut curved notches INTO a rectangle's straight edges; `squircle-corner-shape-tile` uses the unrelated `corner-shape` box property, which only reshapes a `border-radius` corner and cannot round an arbitrary polygon vertex at all; no existing entry uses `polygon(round ...)` — genuinely new ground. **Honest fallback, verified against spec behavior, same cascade-guarded pattern this catalog always uses:** a parser that doesn't recognize the `round` keyword inside `polygon()` treats the whole function as an invalid value and drops the `clip-path` declaration entirely, leaving `clip-path` at its initial value of `none` — the tag then just renders as its underlying rounded-rectangle div (see fallback CSS below) rather than a broken or half-clipped shape. Zero JS, zero WebGL, zero scroll-jacking, pure CSS-in-the-cascade — fits the DIY $999 tier as cleanly as it fits here, and a sale/price tag is a directly useful, generic real component for the small local-business/e-commerce sites that tier sells to. (Vanilla example: live iframe preview + HTML/CSS tabs.)

<div class="rpt-wrap">
  <div class="rpt-tag">
    <span class="rpt-pct">30% OFF</span>
    <span class="rpt-label">Today only</span>
  </div>
  <span class="rpt-note">Needs Chromium 150+ for the rounded notch point — plain rounded-rectangle tag everywhere else</span>
</div>