Gerador CSS clip-path

Arrastar alças de polígono → código polygon()

Formas

4 points

Ponto #1

X %

Y %

Editor (drag handles)

Preview

CSS

clip-path: polygon(50.0% 0.0%, 100.0% 50.0%, 50.0% 100.0%, 0.0% 50.0%);

Como usar

Selecione uma forma preset ou comece com o polígono padrão no editor SVG.
Arraste as alças circulares para reposicionar cada vértice do polígono.
Adicione um novo ponto (inserido no ponto médio da borda selecionada) ou remova o ponto selecionado.
Afine os percentuais exatos de X/Y nas entradas de coordenadas.
Copie o CSS clip-path gerado e cole em seu stylesheet.

Exemplos

Arrastar uma alça de triângulo para 50% 0%, 0% 100%, 100% 100% produz clip-path: polygon(50.0% 0.0%, 0.0% 100.0%, 100.0% 100.0%).
Adicionar um ponto na borda direita de um retângulo e puxá-lo para fora cria uma forma de seta em tempo real.

Verifique as saídas antes de usar em produção. Sem garantia — veja Termos.