shape() for clip-path / offset-path

Baseline 2026 (Chrome 135, Safari 18.4, Firefox 148 em fevereiro de 2026). O Chrome 149 também permite em `shape-outside`.

Chrome 135Edge 135Safari 18.4Firefox 148

Uma sintaxe de path escrita em unidades e matemática de CSS em vez dos números sem unidade do SVG, então formas de recorte podem ser responsivas (`line by 100% 0`, `arc to ...`). Caudas de balão de fala, entalhes e seções inclinadas ficam nítidas em qualquer tamanho.

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: Mantenha um clip-path `polygon()` antes da linha com shape() para navegadores mais antigos, ou aceite um retângulo simples.

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

Prompt

Escreva formas de recorte responsivas com `clip-path: shape(from X Y, line to ..., hline to ..., vline to ..., arc to ..., curve to ..., close)` usando porcentagens, px e calc() em vez de `path()` com coordenadas sem unidade. Forneça uma declaração de fallback `polygon()` acima dela. Use o mesmo `shape()` em `offset-path` para movimento ao longo da forma.