Gerador de caminho de clipe CSS

O clip-path CSS aceita uma função polygon() feita de qualquer número de pares de coordenadas x/y, o que significa que ele pode esculpir uma caixa em formas muito além dos simples retângulos e círculos que a maioria das pessoas procura. O problema é que digitar essas coordenadas manualmente é tedioso e quase impossível de acertar para qualquer coisa além de um triângulo básico – esse gerador transforma essa lista de coordenadas em um conjunto de pontos arrastáveis ​​em uma visualização ao vivo, de modo que a forma que você vê é sempre a forma que o CSS produz.

Cada ponto na visualização é armazenado como uma porcentagem da largura e altura da caixa, que é exatamente como o próprio clip-path: polygon() funciona nos bastidores: uma forma construída dessa maneira mantém suas proporções corretas, não importa o tamanho do elemento em uma página real, desde uma pequena máscara de ícone até um banner de herói de largura total. Arraste qualquer ponto para remodelar o contorno, clique perto de uma aresta para adicionar um novo ponto exatamente onde você clicou ou clique duas vezes em um ponto existente para excluí-lo — o editor sempre mantém pelo menos três pontos, já que um polígono não pode existir com menos.

As seis predefinições agrupadas são escolhidas para provar que o caminho do clipe pode fazer mais do que formas convexas: a estrela e a seta dependem de ângulos reflexos que apontam para dentro, o balão de fala esculpe uma cauda triangular em um retângulo simples e o canhoto do bilhete amassa dois entalhes em bordas opostas, da mesma forma que um bilhete perfurado real se parece. Carregue qualquer predefinição e continue arrastando a partir daí – nada no editor prende você na forma inicial.

Carregue sua própria imagem para visualizar o caminho do clipe em relação ao conteúdo real, em vez de uma caixa simples, ou pule totalmente o upload e a visualização voltará a um padrão listrado para que a forma do corte permaneça claramente visível de qualquer maneira. Como todas as ferramentas deste site, tudo é executado localmente no navegador: nenhuma imagem sai do seu dispositivo e o gerador continua funcionando offline depois que a página é carregada.