Criador CSS Clip-path

Criador CSS Clip-path - Gerador Visual de Formas

Crie formas CSS clip-path complexas visualmente. Esta ferramenta suporta poligono, circulo, elipse e inset com uma interface intuitiva de arrastar e soltar para pontos de poligono.

O que e CSS clip-path?

CSS clip-path e uma propriedade que cria uma regiao de recorte para definir quais partes de um elemento sao visiveis. As partes fora da regiao de recorte ficam ocultas.

Tipos de forma:

polygon() - Formas personalizadas com multiplos pontos
circle() - Recorte circular
ellipse() - Recorte oval
inset() - Retangular com cantos arredondados opcionais

Como crio um clip-path de poligono?

O clip-path de poligono usa pontos de coordenadas:

Sintaxe: polygon(x1% y1%, x2% y2%, ...)

Cada ponto e definido por porcentagens X e Y:
- 0% 0% = canto superior esquerdo
- 100% 0% = canto superior direito
- 100% 100% = canto inferior direito
- 0% 100% = canto inferior esquerdo

Como funcionam circulo e elipse?

Sintaxe do circulo:
circle(raio at centroX centroY)

Exemplo: circle(50% at 50% 50%)
- Cria um circulo com raio 50%
- Centralizado em 50% 50%

Sintaxe da elipse:
ellipse(raioX raioY at centroX centroY)

Exemplo: ellipse(50% 30% at 50% 50%)

O que e inset clip-path?

Inset cria um recorte retangular com cantos arredondados opcionais:

Sintaxe: inset(topo direita fundo esquerda round raio)

Os valores representam recuo de cada borda:
- inset(10%) - 10% de todos os lados
- inset(10% 20%) - 10% topo/fundo, 20% esquerda/direita

Recursos principais

• 4 tipos de forma: poligono, circulo, elipse, inset
• Edicao visual de pontos arrastaveis
• 12 formas de poligono predefinidas
• Adicionar e remover pontos de poligono
• Entrada numerica precisa para todos os valores
• Visualizacao ao vivo
• Controles de raio e posicao do circulo
• Elipse com raios X/Y independentes
• Inset com suporte a raio de borda
• Copiar codigo CSS
• Amigavel com dispositivos de toque
• Processamento 100% no cliente
• Suporte ao modo escuro
• Interface responsiva