Diferença entre clip-path e border-radius?

`border-radius` arredonda os cantos de um retângulo - por baixo ele continua retangular. `clip-path` substitui o retângulo por qualquer polígono (ou círculo, elipse, até um path SVG) e esconde tudo que fica fora. Use border-radius para cards arredondados; use clip-path quando a forma não é retangular arredondada - triângulos, hexágonos, setas apontando para tooltip, cantos de fita, etc.

Clip-path afeta o layout?

Não. O elemento mantém a caixa original para o layout - margens, bordas e conteúdo seguinte se posicionam como se não houvesse clip. As áreas de hover e clique também mantêm o retângulo original por padrão, o que pode surpreender: um botão recortado em triângulo ainda dispara hover quando o usuário está no canto vazio. Adicione regras de `pointer-events` ou envelope a forma visível em um SVG se precisar que o hit testing siga o clip.

Dá para animar o clip-path?

Sim, mas só entre paths com o mesmo número de pontos - o browser interpola `polygon(0 0, 100% 0, 50% 100%)` para outro polígono de 3 pontos, mas não para um de 4. O mesmo vale para `circle()` e `ellipse()`: mesma função, parâmetros diferentes = anima; misturar funções = não. Para morphs complexos, use bibliotecas de animação de path SVG.

Por que meu clip-path está cortando a borda?

As bordas ficam dentro do clip, então uma borda grossa em um div recortado em triângulo é cortada nas diagonais. Dois remédios: use um SVG com atributo `stroke` (limpo, escala bem), ou use `filter: drop-shadow()` com spread pequeno em vez de uma borda (a sombra segue a forma visível).

Suporte de navegadores?

`clip-path: polygon(...)` e as formas básicas (`circle`, `ellipse`, `inset`) funcionam em todos os navegadores modernos. Clips baseados em path (`path('...')`) precisam de Chrome 88+, Safari 13.1+, Firefox 97+. O elemento SVG ` ` é um fallback portátil para browsers antigos e suporta paths em todo lugar.

Gerador de clip-path CSS

Crie clip-paths visualmente - triângulo, hexágono, estrela, balão - com pré-visualização ao vivo e CSS pronto para colar.

Predefinições

Pontos do polígono (x% y%, separados por vírgulas)

CSS

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Pré-visualização

Escolha uma predefinição, veja o recorte ao vivo sobre uma imagem de exemplo, copie o CSS. Os pontos do polígono ficam listados abaixo da pré-visualização - ajuste percentuais à mão se uma predefinição está perto sem ser perfeita. Alterne o fundo entre imagem, cor sólida e gradiente: clip-path não adiciona contorno nem anti-aliasing, o contraste com o fundo importa.

Como usar

Escolha uma predefinição
Triângulo, losango, pentágono, hexágono, octógono, estrela, seta, mensagem, cruz, ticket - um clique carrega o polígono.
Ajuste os pontos
Edite as coordenadas em porcentagem abaixo da pré-visualização para afinar. A forma atualiza ao digitar.
Teste o fundo
Alterne entre imagem, cor sólida e gradiente para confirmar que a forma recortada se lê contra as superfícies em que vai viver.
Copie o CSS
A declaração `clip-path: polygon(...)` completa está pronta para colar na sua folha de estilos.

O que é?

Um gerador de clip-path CSS constrói visualmente a propriedade `clip-path`. A forma mais comum é `polygon(x1 y1, x2 y2, ...)` - uma lista de coordenadas em porcentagem que define a região visível do elemento; tudo fora fica escondido. Outras funções de forma (`circle()`, `ellipse()`, `inset()`, `path()`) cobrem formas redondas e arbitrárias. O resultado é acelerado por GPU e animável entre variantes de mesma forma.

Quando usar

Grades de avatares hexagonais, cantos de fita em cards, ponteiros triangulares de tooltips e balões de chat, hero sections com corte diagonal, formas de ticket para ofertas, estrelas de rating como preenchimentos recortados, balões de mensagem, divisores inclinados entre seções e fundos de ícone sem SVG.

Erros comuns

Esquecer que clip-path não muda a área de hit do elemento - o usuário pode clicar no canto triangular vazio e ainda assim disparar o botão. Tentar animar entre polígonos com número de pontos diferente e ganhar um salto em vez de interpolação. Aplicar clip-path em um elemento com borda grossa e se surpreender quando ela é fatiada. Usar percentuais sem travar a razão de aspecto - um triângulo em elemento largo achata em uma faixinha.

FAQ

Diferença entre clip-path e border-radius?: `border-radius` arredonda os cantos de um retângulo - por baixo ele continua retangular. `clip-path` substitui o retângulo por qualquer polígono (ou círculo, elipse, até um path SVG) e esconde tudo que fica fora. Use border-radius para cards arredondados; use clip-path quando a forma não é retangular arredondada - triângulos, hexágonos, setas apontando para tooltip, cantos de fita, etc.
Clip-path afeta o layout?: Não. O elemento mantém a caixa original para o layout - margens, bordas e conteúdo seguinte se posicionam como se não houvesse clip. As áreas de hover e clique também mantêm o retângulo original por padrão, o que pode surpreender: um botão recortado em triângulo ainda dispara hover quando o usuário está no canto vazio. Adicione regras de `pointer-events` ou envelope a forma visível em um SVG se precisar que o hit testing siga o clip.
Dá para animar o clip-path?: Sim, mas só entre paths com o mesmo número de pontos - o browser interpola `polygon(0 0, 100% 0, 50% 100%)` para outro polígono de 3 pontos, mas não para um de 4. O mesmo vale para `circle()` e `ellipse()`: mesma função, parâmetros diferentes = anima; misturar funções = não. Para morphs complexos, use bibliotecas de animação de path SVG.
Por que meu clip-path está cortando a borda?: As bordas ficam dentro do clip, então uma borda grossa em um div recortado em triângulo é cortada nas diagonais. Dois remédios: use um SVG com atributo `stroke` (limpo, escala bem), ou use `filter: drop-shadow()` com spread pequeno em vez de uma borda (a sombra segue a forma visível).
Suporte de navegadores?: `clip-path: polygon(...)` e as formas básicas (`circle`, `ellipse`, `inset`) funcionam em todos os navegadores modernos. Clips baseados em path (`path('...')`) precisam de Chrome 88+, Safari 13.1+, Firefox 97+. O elemento SVG `<clipPath>` é um fallback portátil para browsers antigos e suporta paths em todo lugar.