Usar shape() para recorte responsivo

Noam Rosenthal

Publicado em: 8 de abril de 2025

A propriedade clip-path permite mudar a forma de um elemento cortando-o em um círculo, um polígono ou até mesmo um caminho SVG. No entanto, antes do Chrome 135 e do Safari 18.4, era necessário escolher entre polígonos responsivos e formas mais complexas que não são responsivas usando caminhos SVG. Com a nova função shape(), um clip-path pode cortar o elemento em uma forma não poligonal que também é responsiva.

Criar uma forma de flag

Por exemplo, compare a criação de uma forma de flag com clip-path: path() e clip-path: shape().

O formato de uma bandeira não é exatamente um polígono, já que as bordas superior e inferior são curvas de Bézier cúbicas, e não linhas retas ou cantos arredondados.

Crie a flag com clip-path: path()

Uma forma como esta bandeira pode ser representada usando um caminho SVG:

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

Para detalhar, um caminho SVG é uma série de comandos de caminho:

1. Mova para 0, 20.
2. Curva para 100, 20, usando pontos de controle (25,0 e 75, 40).
3. Linha vertical até 80.
4. Faça uma curva para 0, 80, usando pontos de controle (75,100 e 25,50).
5. Feche o caminho (linha até 0,20).

Isso desenha uma forma de bandeira, mas todas as unidades estão em pixels. O SVG pode dimensionar esses pixels para uma caixa de visualização, mas de uma forma que sempre pareceria uma escala geométrica de toda a forma.

Por exemplo, se você quiser que o retângulo inteiro seja dimensionado, mas mantenha a altura e a largura das curvas em 20 px, o SVG não será adequado.

Crie a flag com shape()

Compare o mesmo resultado usando shape(). A função de forma aceita uma série de comandos, semelhantes aos comandos de caminho SVG. No entanto, esses comandos aceitam comprimentos e porcentagens de CSS em qualquer unidade de CSS.

O CSS a seguir converte a flag shape() com unidades de porcentagem:

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

Faça com que ele seja responsivo

Com toda a variedade de comprimentos de CSS disponíveis, você pode escolher quais usar para cada coordenada.

Por exemplo, para dimensionar todo o tamanho da flag pelo tamanho do elemento, mas manter a altura da curva constante, faça o seguinte:

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

Adicionar propriedades e animações personalizadas

Com a forma definida em CSS, também é possível usar propriedades personalizadas para facilitar a manipulação da altura:

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Você pode até animar a propriedade CSS usando o descritor @property e restringi-la para que não vá além do limite:

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Teste a demonstração

No Chrome 135 ou Safari 18.4, você pode conferir a forma da bandeira animada criada usando clip-path: shape() nesta demonstração do CodePen.

Resumo

clip-path: shape() permite cortar o elemento usando formas arbitrárias e responsivas, o que antes só era possível usando técnicas como gradientes cônicos ou SVG construído em JavaScript.

Confira a especificação para ver a sintaxe completa.

No momento, ele funciona apenas para clip-path. No futuro, queremos usar esse tipo de forma para definir o formato da borda do elemento, o que vai permitir ainda mais formas de expressão não retangulares.