shape() for clip-path / offset-path

Baseline 2026 (Chrome 135, Safari 18.4, Firefox 148 en febrero de 2026). Chrome 149 también lo permite en `shape-outside`.

Chrome 135Edge 135Safari 18.4Firefox 148

Una sintaxis de trazado escrita en unidades y matemáticas de CSS en vez de los números sin unidad de SVG, de modo que las formas de recorte pueden ser responsivas (`line by 100% 0`, `arc to ...`). Colas de bocadillo, muescas y secciones inclinadas se mantienen nítidas a cualquier tamaño.

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: Conserva un clip-path `polygon()` antes de la línea con shape() para navegadores antiguos, o acepta un rectángulo plano.

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

Prompt

Escribe formas de recorte responsivas con `clip-path: shape(from X Y, line to ..., hline to ..., vline to ..., arc to ..., curve to ..., close)` usando porcentajes, px y calc() en lugar de `path()` con coordenadas sin unidad. Proporciona una declaración `polygon()` de respaldo encima. Usa el mismo `shape()` en `offset-path` para movimiento a lo largo de la forma.