# shape() for clip-path / offset-path

Estado: Baseline 2026 (Chrome 135, Safari 18.4, Firefox 148 en febrero de 2026). Chrome 149 también lo permite en `shape-outside`.  
Fuente: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/148 and https://developer.chrome.com/release-notes/149  
Página: https://designforai.dev/es/css/shape

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.

## HTML

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

## CSS

```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);
}
```

Fallback: Conserva un clip-path `polygon()` antes de la línea con shape() para navegadores antiguos, o acepta un rectángulo plano.

## 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.