CSS Clip-Path Generator de formas
Crie formas de polígonos, estrelas, crachás, hexágonos e chevrons com a moderna geometria do caminho de clipe CSS.
Roda no seu navegador. Seus arquivos nunca saem do seu dispositivo. Veja como conferir
…
Como fazer
- 1Passo 1: abra CSS Clip-Path Generator de formas e informe seus dados
Digite seus números ou texto, adicione seu arquivo ou escolha as opções necessárias. Nada é enviado: tudo fica no seu navegador.
- 2Passo 2: o que CSS Clip-Path Generator de formas faz
Crie formas de polígonos, estrelas, crachás, hexágonos e chevrons com a moderna geometria do caminho de clipe CSS.
- 3Passo 3: leia o resultado e compare
O resultado aparece na hora. Altere um valor para ver como a resposta muda e fique com o número que serve ao seu caso.
- 4Passo 4: copie ou salve
Copie o resultado ou baixe-o. Para uma decisão importante, confirme com a fonte oficial ou com um consultor.
Sobre esta ferramenta
O Clip-path permite que os desenvolvedores cortem elementos HTML e imagens em polígonos geométricos precisos sem precisar de máscaras Photoshop ou SVG. Selecione entre predefinições populares, inspecione a máscara renderizada em tempo real e copie coordenadas de polígonos CSS puras prontas para produção.
Dicas para melhores resultados
Reserve um momento para ler as opções antes de começar e teste a ferramenta primeiro com uma amostra pequena. Tudo roda no seu navegador, no seu próprio dispositivo, então nada do que você digita ou adiciona é enviado, e fechar a aba apaga tudo. Se algo não parecer certo, recarregue a página e tente de novo, ou use o link de relato desta página para nos contar o que deu errado e podermos corrigir. Se um resultado ainda parecer errado, mude um valor de cada vez para ver qual campo mais importa. Salve esta página nos favoritos se for precisar da ferramenta de novo.
Resumo rápido
- Categoria: Imagens
- Funciona no seu navegador, sem cadastro e sem envio de arquivos.
- O que você digita fica no seu dispositivo.
- Disponível em vários idiomas.
- Conteúdo revisado pela última vez:
Perguntas frequentes
O que é CSS clip-path?
The `clip-path` CSS property creates a clipping region that determines which parts of an element or image are visible.
Quais formas estão incluídas como predefinições?
Os presets incluem triângulo, hexágono, estrela de 5 pontos, crachá com desconto no produto, chevron de navegação e máscaras circulares.
Posso tirar fotos e vídeos com isto?
Yes. Apply the generated clip-path CSS rule to any `<img>`, `<video>`, `<div>`, or card component in your stylesheet.
O caminho do clipe afeta as caixas de acerto clicáveis?
Nos navegadores modernos, apenas a área visível e não cortada do elemento responde aos eventos de ponteiro e clique.