EspañolGerador de clip-path CSS
Escolha uma forma e arraste os pontos na prévia para ajustar. O código clip-path em porcentagem funciona em qualquer tamanho de elemento.
Recorte em formas com clip-path
Disponível em: 
Gerador de clip-path CSS: para que serve
Escolha uma das formas prontas (triângulo, losango, hexágono, pentágono, estrela, seta, mensagem, cantos cortados, paralelogramo, círculo ou elipse) e arraste os pontos na prévia para ajustar. As coordenadas ficam em porcentagem, então o recorte funciona em qualquer tamanho.
Teste com a sua foto e copie a linha de clip-path pronta.
Como usar
- Escolha uma forma.
- Arraste os pontos para ajustar e teste com uma foto.
- Copie o clip-path e use no CSS.
Quando usar
- Fotos com formatos diferentes em sites.
- Seções com cantos inclinados.
- Selos, setas e balões só com CSS.
Perguntas frequentes
O que é clip-path?
É uma propriedade CSS que mostra só a parte de um elemento dentro de uma forma. A imagem continua inteira no arquivo; só o que fica fora da forma é escondido.
Funciona em todos os navegadores?
Sim. polygon(), circle() e ellipse() funcionam em todos os navegadores atuais, sem prefixo.
Dá para animar?
Sim, entre dois polygon() com o mesmo número de pontos, usando transition ou animation em clip-path. Os pontos se movem suavemente de uma forma para a outra.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.