Gerador de clip-path CSS
Escolha círculo, elipse, recorte, triângulo ou polígono regular e copie o clip-path.
- Roda no seu navegador
Resultado
O resultado aparece aqui.
As formas disponíveis
| Forma | O que os campos fazem |
|---|---|
| Círculo | centro em % da caixa; o raio em % é medido pela diagonal da caixa dividida por √2, não pela largura; o centro 50 e 50 não aparece na saída |
| Elipse | raio horizontal e vertical em %, mais o centro |
| Recorte retangular (inset) | recua os quatro lados na mesma porcentagem; o raio de canto é em px |
| Triângulo | polygon com vértices fixos: topo e cantos de baixo |
| Polígono regular | de 3 a 12 lados, inscrito na caixa, com giro em graus |
Resultados de referência
| Escolhas | CSS gerado |
|---|---|
| círculo de 50%, centro padrão | clip-path: circle(50%); |
| recorte de 10% com cantos de 16 | clip-path: inset(10% round 16px); |
| triângulo | clip-path: polygon(50% 0%, 0% 100%, 100% 100%); |
| hexágono girado 30 graus | clip-path: polygon(75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%, 25% 6.7%); |
Os vértices do polígono são calculados com seno e cosseno e arredondados a uma casa decimal, sempre para cima no meio. Numa caixa quadrada a forma é regular; numa retangular ela estica junto com a caixa.
Perguntas frequentes
Como usar o clip-path css com polygon?
Escolha polígono regular, o número de lados e o giro. Um hexágono com giro de 30 graus gera: clip-path: polygon(75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%, 25% 6.7%);
O clip path css generator recorta o elemento de verdade?
O clip-path esconde o que fica fora da forma, mas a caixa do elemento no layout continua a mesma. Outros elementos não ocupam o espaço recortado.