shape() for clip-path / offset-path

Baseline 2026 (Chrome 135, Safari 18.4, Firefox 148 im Februar 2026). Chrome 149 erlaubt es auch in `shape-outside`.

Chrome 135Edge 135Safari 18.4Firefox 148

Eine Pfadsyntax in CSS-Einheiten und Mathe statt SVGs einheitenloser Zahlen, sodass Clip-Formen responsiv sein können (`line by 100% 0`, `arc to ...`). Sprechblasenspitzen, Kerben und schräge Abschnitte bleiben in jeder Größe scharf.

Speech bubble with a shape() tail

CSS

.fx-033{
  --tail:14px;
  background:#2563eb;color:#fff;padding:12px 16px calc(12px + var(--tail));font-family:system-ui;max-width:260px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--tail)),40px calc(100% - var(--tail)),26px 100%,26px calc(100% - var(--tail)),0 calc(100% - var(--tail)));
  clip-path:shape(from 0 0,hline to 100%,vline to calc(100% - var(--tail)),hline to 40px,line by calc(-1 * var(--tail)) var(--tail),vline to calc(100% - var(--tail)),hline to 0,close);
}

HTML

<div class="fx-033">Speech bubble with a shape() tail</div>

Fallback: Behalte einen `polygon()`-clip-path vor der shape()-Zeile für ältere Browser oder akzeptiere ein einfaches Rechteck.

Quelle: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/148 and https://developer.chrome.com/release-notes/149

Prompt

Schreibe responsive Clip-Formen mit `clip-path: shape(from X Y, line to ..., hline to ..., vline to ..., arc to ..., curve to ..., close)` mit Prozenten, px und calc() statt `path()` mit einheitenlosen Koordinaten. Liefere darüber eine `polygon()`-Fallback-Deklaration. Nutze dieselbe `shape()` in `offset-path` für Bewegung entlang der Form.