Gerador de clip-path

Como usar o gerador de clip-path

1. Escolhe uma Forma: Polígono, Círculo, Elipse ou Inset. A camada esbatida mostra o elemento completo; a camada nítida mostra o que fica visível depois do recorte.
2. Arrasta os pontos no editor. Num polígono, cada ponto é um vértice; clica em qualquer sítio da área para adicionar um ponto na aresta mais próxima. Num círculo ou numa elipse, arrasta o centro e os pontos do raio. Num inset, arrasta os quatro pontos das margens.
3. Afina nos campos por baixo: a lista de Pontos (X e Y em percentagem, com Remover e Adicionar ponto) para os polígonos, ou os campos Raio, Centro X, Centro Y, Cima, Direita, Baixo, Esquerda e Cantos arredondados (px) para as outras formas.
4. Começa mais depressa com as Predefinições: triângulo, trapézio, paralelogramo, losango, pentágono, hexágono, octógono, chanfro, estrela, cruz, setas, chevron, balão de fala, círculo, elipse e inset.
5. Marca Ajustar a 5 % para obter valores arrumados, e Adicionar -webkit-clip-path (Safari antigo) se ainda dás suporte ao Safari 13.0 ou anterior.
6. Se quiseres, larga uma fotografia em Imagem de fundo (opcional) para veres a forma aplicada à tua imagem. O ficheiro nunca é enviado.
7. Copia o Código CSS com Copiar.

Teclado: seleciona um ponto, move-o com as setas (1 %, ou 10 % com Shift) e carrega em Delete para remover um ponto do polígono. Um polígono mantém sempre pelo menos três pontos.

As funções de forma do clip-path

clip-path esconde tudo o que fica fora de uma forma. O elemento mantém o seu tamanho no layout; só a pintura e a área clicável são recortadas.

• polygon(x1 y1, x2 y2, …) une os pontos por ordem e fecha a forma. polygon(50% 0%, 100% 100%, 0% 100%) é um triângulo virado para cima. As coordenadas começam no canto superior esquerdo do elemento.
• circle(r at cx cy): circle(50% at 50% 50%) é o maior círculo centrado no elemento. Um raio em percentagem é relativo à diagonal do elemento dividida por √2, por isso só corresponde a uma fração da largura em elementos quadrados.
• ellipse(rx ry at cx cy): o raio horizontal é uma fração da largura e o vertical uma fração da altura.
• inset(top right bottom left round radius) recorta um retângulo dentro das margens, com a mesma abreviatura de um a quatro valores das margens e cantos arredondados opcionais.

Esta ferramenta escreve percentagens, por isso a forma acompanha o elemento seja qual for o seu tamanho.

Dicas para boas formas

• A ordem dos pontos do polígono importa: percorrer o contorno no sentido dos ponteiros do relógio (ou no sentido contrário) evita formas cruzadas, em «laço».
• Duas formas com o mesmo número de pontos podem ser animadas: transition: clip-path 0.4s transforma um hexágono noutro hexágono de forma suave. O navegador não consegue interpolar entre polígonos com números de pontos diferentes.
• clip-path também recorta o box-shadow e as bordas. Para dar uma sombra a uma forma recortada, aplica filter: drop-shadow() a um elemento pai.
• As áreas recortadas não recebem cliques nem hover, o que dá jeito para botões irregulares.