Resumo de como usar a nova função `shape()` do CSS

• A função CSS shape() começou a ser suportada nos navegadores Chromium e WebKit
• Diferente de path(), agora é possível definir formas complexas com sintaxe e unidades de CSS mais legíveis
• Ao criar formas complexas em clip-path, dá para implementar usando um método baseado em comandos em inglês, em vez de coordenadas SVG
• Com novos comandos como line, arc e curve, fica possível escrever linhas, curvas e arcos de forma concisa
• shape() ainda tem suporte limitado para animações, mas mudanças dinâmicas em resposta a hover/focus são possíveis

---

Visão geral

• A função CSS shape() é usada junto com clip-path e permite recorte de formas complexas no navegador
• Antes, era possível usar formas básicas como circle, ellipse e polygon, mas formas livres só eram possíveis com path()
• Como path() exige digitar diretamente coordenadas e comandos SVG, a legibilidade era pior e a curva de aprendizado maior

Características da função shape()

• Permite montar formas vetoriais de um jeito mais natural para CSS
• O ponto inicial pode ser definido com palavras-chave de direção (from top left) ou valores de coordenada (from 0 0)
• A forma é composta por uma sequência de comandos. Ex.: line, vline, arc, curve, smooth

Explicação dos principais comandos

• line
  • Significado: desenha uma linha a partir do ponto inicial
  • Uso: define posição relativa com a palavra-chave by
  • Exemplo: line by -2px 3px
• vline
  • Significado: desenha uma linha vertical
  • Uso: define posição absoluta com to e relativa com by
  • Exemplo: vline to 50px
• hline
  • Significado: desenha uma linha horizontal
  • Uso: define posição absoluta com to e relativa com by
  • Exemplo: hline to 95%
• arc
  • Significado: desenha uma curva em formato elíptico
  • Uso:
    • to: ponto final do arco
    • with: direção de inclinação do arco (horizontal/vertical)
    • of: raio da elipse à qual o arco pertence (horizontal/vertical)
  • Exemplo: arc to 10% 50% of 1%
• curve
  • Significado: desenha uma curva de Bézier
  • Uso:
    • to: ponto final da curva
    • with: pontos de controle da curva (ajuste de curvatura)
  • Exemplo: curve to 0% 100% with 50% 0%
• smooth
  • Significado: desenha uma curva suave (curvas de Bézier conectadas)
  • Uso:
    • to: ponto final
    • by: coordenadas relativas
    • with: pontos de controle

Outros pontos

• shape() pode ser alterado dinamicamente em estados de hover/focus
• Nos navegadores atuais, animações com transition não funcionam
• A função de cálculo calc() também pode ser usada

Links de referência

• Especificação oficial