Gerador de clip-path CSS
Parta de uma forma predefinida ou mova diretamente os pontos do polígono para criar seu próprio recorte e obtenha o código CSS clip-path correspondente, com prévia ao vivo. Tudo acontece no seu navegador, nada é enviado a um servidor.
Arraste os pontos brancos na prévia para ajustar a forma ou adicione/remova pontos abaixo.
Como funciona
A propriedade CSS clip-path recorta um elemento segundo uma forma definida por uma lista de pontos, expressos em porcentagem da largura e da altura do elemento. Esta ferramenta oferece formas comuns prontas para uso (triângulo, hexágono, faixa, estrela...) e também permite mover cada ponto com o mouse ou o dedo para desenhar um recorte totalmente personalizado.
Por que as coordenadas são expressas em porcentagem?
Usar porcentagens em vez de pixels torna a forma recortada responsiva: ela se adapta automaticamente ao tamanho real do elemento em que é aplicada, ao contrário de valores fixos, que deformariam o recorte em uma tela diferente.
O clip-path funciona em todas as imagens e vídeos?
Sim, o clip-path se aplica à maioria dos elementos HTML, incluindo imagens, vídeos, botões e contêineres, em todos os navegadores modernos; lembre-se, porém, de manter uma margem de segurança no seu layout, pois o conteúdo que fica fora da forma recortada se torna invisível, mas continua ocupando seu espaço original.
Processamento 100% local: o traçado do polígono e o código gerado permanecem inteiramente no seu navegador.