Question 1

O que é CSS clip-path?

Accepted Answer

CSS clip-path é uma propriedade que define uma região de recorte para um elemento. Apenas o conteúdo dentro da forma especificada é visível, enquanto o restante fica oculto. É usado para criar formas não retangulares para elementos como imagens, divs e botões sem precisar de SVG ou marcação adicional.

Question 2

Que formas posso criar com clip-path?

Accepted Answer

CSS clip-path suporta polygon (formas personalizadas de múltiplos pontos), circle, ellipse e inset (retangular com cantos arredondados opcionais). O tipo polygon é o mais flexível, permitindo triângulos, losangos, hexágonos, setas e praticamente qualquer forma definida por uma série de pontos em porcentagem.

Question 3

Como funcionam os valores percentuais no clip-path?

Accepted Answer

Os valores percentuais no clip-path são relativos às dimensões do próprio elemento. 0% 0% é o canto superior esquerdo, 100% 0% é o canto superior direito, 50% 50% é o centro e 100% 100% é o canto inferior direito. Isso torna as formas clip-path responsivas ao tamanho do elemento.

Question 4

O clip-path afeta o layout do elemento?

Accepted Answer

Não, o clip-path apenas afeta o que é visível — não altera o modelo de caixa ou layout do elemento. O elemento ainda ocupa seu espaço original. Se você precisa alterar o layout junto com o recorte, considere usar shape-outside com float para efeitos de envolvimento de texto.

Question 5

Como animar o clip-path?

Accepted Answer

O clip-path pode ser animado usando transições CSS ou animações de quadros-chave entre duas formas compatíveis (por exemplo, polygon com o mesmo número de pontos). Adicione transition: clip-path 0.3s ease para habilitar a morfose suave de formas ao passar o cursor ou mudar de estado.

Gerador CSS Clip-Path

Perguntas Frequentes

Comments & Feedback