CSS Clip-Path Polígono

CSS clip-path polygon(): recortando formas customizadas por vértices

A função polygon() dentro de clip-path define uma forma arbitrária a partir de uma sequência de vértices: clip-path: polygon(x1 y1, x2 y2, x3 y3, ...). As coordenadas podem estar em porcentagens (relativas à caixa do elemento) ou em unidades absolutas como px. O navegador liga os pontos por segmentos retos e fecha o caminho automaticamente, escondendo qualquer pixel fora da região. Com uma única declaração você substitui máscara SVG, recorte de imagem no Photoshop ou wrappers DOM extras.

Formas comuns e número de vértices

• Triângulo: 3 pontos — polygon(50% 0, 100% 100%, 0 100%).
• Paralelogramo / chevron: 4-5 pontos com bordas inclinadas, ideal para botões e fitas.
• Hexágono: 6 pontos a cada 60° a partir de 0°.
• Octógono: 8 pontos com 45° de distância — silhueta clássica de placa de pare.
• Estrela: 10 pontos alternando raio externo/interno (estrela de 5 pontas).

Matemática: convertendo ângulos em coordenadas

Para qualquer polígono regular com centro em (50%, 50%) e raio r, cada vértice fica no ângulo θ a partir da horizontal:

x = 50% + r * cos(θ)
y = 50% + r * sin(θ)

// Hexágono (6 vértices, passo 60°, começando em -90°)
polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)

Comece em θ = -90° para que o primeiro vértice fique apontado para cima. Para um polígono de N lados, o passo angular é 360° / N.

Regras de animação e performance

clip-path é animável, mas apenas entre polígonos com o mesmo número de vértices. Para transitar de triângulo para quadrado, adicione um ponto degenerado no triângulo de modo que ambos tenham quatro vértices. Combine com transform: rotate() ou scale() para transições mais ricas — o clip vive em uma camada composta na GPU, então as animações ficam suaves até em mobile mediano. Não há cantos arredondados nem curvas; para isso use path() com sintaxe SVG completa.

Casos de uso e ferramentas

• Divisores inclinados entre hero e corpo sem wrappers SVG.
• Botões customizados (chevron, fita, badge) sem DOM extra.
• Avatares hexagonais e máscaras de imagem para galerias.
• Tooltips decorativos com a setinha já embutida no clip.

O editor visual mais popular é o Clippy (bennettfeely.com/clippy) — arraste os vértices e copie o CSS. O suporte é excelente (Chrome 55+, Firefox 54+, Safari 9.1+), portanto não precisa de polyfill. A futura função shape() (rascunho CSS Shapes 2) promete uma sintaxe mais amigável e mistura de unidades.

Perguntas frequentes

Consigo animar entre dois polígonos diferentes? Sim, desde que as duas listas tenham o mesmo número de vértices. O navegador interpola cada ponto linearmente. Se a contagem diferir, complete o polígono menor com pontos duplicados (arestas degeneradas).

Como faço cantos arredondados em um polígono? Não dá — polygon() só desenha segmentos retos. Para curvas use clip-path: path("...") com a sintaxe SVG completa, incluindo curvas de Bézier e arcos.

Polígono CSS ou SVG <polygon>? O clip-path CSS integra com qualquer elemento HTML — mantém texto selecionável e estados hover do CSS. SVG é mais flexível para formas muito complexas com curvas, mas adiciona nós ao DOM. Para decorações de landing page, clip-path costuma ganhar pela simplicidade.

Posso misturar px e %? Sim — polygon(20px 0, 100% 100%, 0 100%) é válido. Porcentagens escalam com a caixa; pixels permanecem fixos. Útil para manter a ponta de um chevron com altura constante de 20 px enquanto a largura do elemento muda.