Question 1

O que é CSS clip-path?

Accepted Answer

A propriedade CSS clip-path recorta um elemento em uma forma, ocultando qualquer conteúdo fora da região definida. Suporta formas como circle, ellipse, polygon, inset e path, permitindo efeitos visuais criativos sem elementos extras.

Question 2

Todos os navegadores suportam clip-path?

Accepted Answer

Sim. clip-path é bem suportado em todos os navegadores modernos incluindo Chrome, Firefox, Safari e Edge. Para navegadores mais antigos pode ser necessário o prefixo -webkit- para algumas formas, mas a cobertura para polygon e inset é excelente.

Question 3

O que é a função polygon() no clip-path?

Accepted Answer

A função polygon() define uma forma personalizada especificando uma lista de pares de coordenadas (x y). Cada par representa um vértice do polígono. As coordenadas usam porcentagens (relativas ao elemento) ou comprimentos absolutos.

Question 4

Posso animar formas clip-path?

Accepted Answer

Sim! Você pode animar entre duas formas clip-path que tenham o mesmo número de pontos usando transições ou animações CSS. Por exemplo, animar de um inset retangular para um círculo cria um suave efeito de morphing.

Question 5

Qual é a diferença entre clip-path e mask?

Accepted Answer

clip-path usa uma forma geométrica para recortar um elemento com bordas duras. CSS mask usa uma imagem (incluindo gradientes) como máscara alpha, suportando bordas suaves e transparência complexa. clip-path é mais simples e eficiente para formas geométricas.

Gerador CSS Clip-Path

Perguntas Frequentes

Comments & Feedback