Como usar
- Digite um Nome da classe para a regra, como triangulo, e escolha uma Forma.
- Para um polígono, arraste um ponto na Visualização ou digite o x e o y nos campos. Use Adicionar ponto e Remover o último ponto para mudar a quantidade.
- Para inset, circle ou ellipse, digite os números nos campos. A visualização é redesenhada na hora.
- Copie a regra CSS para a sua folha de estilo e coloque a classe no elemento que você quer recortar.
As quatro formas
O CSS Shapes Module (em inglês) define as formas básicas que o clip-path aceita. Um polígono é uma lista de pontos, cada um com um par de posições, e os pontos são ligados na ordem em que aparecem. Um inset corta a caixa em quatro distâncias, dadas como superior, direita, inferior e esquerda. Um círculo ou uma elipse tem um raio, ou dois raios, e o centro vem depois da palavra at.
- polygon(50% 0%, 100% 100%, 0% 100%) tem três pontos, cada um com um x e um y em porcentagem.
- inset(10% 20% 10% 20%) corta 10% da parte superior e da inferior, e 20% da esquerda e da direita.
- circle(60px at 50% 50%) tem raio de 60 px e o centro no meio da caixa.
Porcentagens e a caixa de referência
Uma porcentagem em um ponto, em um recuo ou em um centro é uma parte da caixa, e a especificação a resolve em relação ao tamanho usado da caixa de referência. O CSS Masking Module (em inglês) diz que, quando nenhuma caixa de referência é dada, usa-se a caixa de borda. As partes do elemento fora da forma não são desenhadas.
O que a ferramenta não escreve
- Uma regra de preenchimento para o polígono, a cláusula round de um inset e as formas url() ou path() do clip-path.
- Uma porcentagem como raio de um círculo ou de uma elipse. O texto de formas que esta ferramenta leu não diz como ela é resolvida, por isso os raios são em px.
Exemplo resolvido: um triângulo
Um triângulo é um polígono com três pontos: o centro do topo, a base direita e a base esquerda da caixa. A tabela mostra cada ponto. Com o nome de classe triangulo, a regra que a ferramenta escreve é .triangulo com clip-path definido como polygon(50% 0%, 100% 100%, 0% 100%).
| Ponto | x | y |
|---|---|---|
| 1 | 50% | 0% |
| 2 | 100% | 100% |
| 3 | 0% | 100% |
Perguntas frequentes
Por que os raios de um círculo ou de uma elipse são em pixels?
O texto de formas não diz como uma porcentagem de raio é resolvida em circle() e ellipse(), por isso a ferramenta oferece apenas pixels. Um raio em pixels tem um só significado, e a visualização o desenha no tamanho que a caixa tem na sua tela.
Por que a forma some quando eu digito um valor errado?
A ferramenta mostra o motivo em vermelho e não desenha a forma, para nunca entregar uma regra errada. Um valor fora do intervalo, ou recuos que não deixam nenhuma parte da caixa, são as causas mais comuns.
A ordem dos pontos faz diferença?
Sim. Os pontos são escritos na ordem em que você os lista, e essa ordem desenha o contorno. Mover um ponto muda a forma sem mudar os outros.
Qual é a diferença entre clip-path e border-radius?
O clip-path recorta o elemento em uma forma, e a parte de fora não é desenhada, enquanto o border-radius apenas arredonda os cantos. A caixa de referência do clip-path é a caixa de borda, salvo se outra for indicada.
Quantos pontos um polígono pode ter aqui?
De 3 a 20. Mais pontos dão um contorno mais fino, mas uma regra mais longa, e a visualização trabalha com até 20 alças.
O CSS que eu crio é enviado para algum lugar?
Não. A visualização e a regra são feitas no seu navegador. Nada é guardado nem enviado ao nosso servidor, por isso copie o CSS antes de sair da página.
Fontes
- W3C: CSS Shapes Module Level 1, basic shapes (em inglês)
- W3C: CSS Masking Module Level 1, the clip-path property (em inglês)
Números e texto verificados pela última vez em quinta-feira, 12 de novembro de 2026.