01
Confira a substituição
Ao escolher estrela ou seta, uma prévia informa quantos pontos atuais serão trocados. Aplicar confirma e Desfazer restaura a forma anterior.
Ferramentas HTML e CSS
Gerador de Clip-Path CSSarraste pontos e exporte
Arraste vértices ou ajuste uma forma básica e confira a declaração CSS correspondente.
Gerador de Clip-Path CSS
Prévia da forma
Resultado CSS
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);As coordenadas e o CSS são gerados somente no navegador.
O CSS está pronto para copiar.
Um recorte diagonal em uma foto ou um selo hexagonal costuma exigir várias tentativas de coordenadas. O Gerador de Clip-Path CSS mostra a borda imediatamente enquanto você move os pontos.
Neste Gerador de Clip-Path CSS, círculo, elipse e inset têm parâmetros próprios. O código para exportar acompanha a forma atual; depois de uma alteração, o resultado antigo não pode ser copiado.
Por que usar este Gerador de Clip-Path CSS
Ajuste o desenho vendo o recorte e as coordenadas ao mesmo tempo.
Arraste um vértice para mudar o recorte
O contorno acompanha o ponto arrastado, e os campos X/Y permitem precisão. O editor de polígono clip-path ajuda a sair do ciclo de editar e testar CSS às cegas.
Compare porcentagem e pixels
A mesma forma pode sair em % ou em px calculados numa caixa de 320 × 320 px. Para um clip-path online responsivo, escolha porcentagem sem deslocar a prévia ao trocar de unidade.
Proteja a forma antes de exportar
02
Edite pontos e unidade
Uma pequena marca na aresta insere um ponto médio. Selecione um vértice para editar X/Y; % acompanha o tamanho do elemento, px usa a caixa de 320 px.
03
Copie apenas o CSS recente
A geração automática espera uma pausa curta. Desligue-a para usar o botão ou Ctrl/Cmd + Enter; exportações ficam bloqueadas enquanto o resultado estiver antigo.
Ferramentas para desenhar a forma
Quatro formas CSS
polygon, circle, ellipse e inset usam controles específicos para pontos, raios, centro, margens e cantos.
Pontos ajustáveis
Adicione um ponto na aresta, arraste ou digite coordenadas. A remoção tem prévia e mantém pelo menos três pontos.
Modelos reversíveis
Triângulo, losango, hexágono, estrela e seta aceleram o começo sem apagar seu trabalho sem confirmação.
Declaração pronta
Este gerador de formas CSS entrega um clip-path padrão para copiar ou baixar em um arquivo CSS.
O que muda e o que permanece
- Pixels dependem da referência
- As coordenadas em px usam 320 × 320 px. Em outro tamanho, a proporção não acompanha automaticamente; para isso, use %. Não misturamos unidades no mesmo polígono.
- Sem importar CSS livre
- O recorte CSS polygon é gerado pelos controles; path(), shape(), calc() e referências SVG existentes não são analisados. A área de código é somente leitura.
- A caixa do layout permanece
- clip-path altera a pintura visível, mas o elemento continua ocupando o mesmo espaço. O box-shadow desenhado nele pode ser cortado.
- Sem imagem ou animação
- Não há envio de foto, PNG/SVG recortado ou código de hover. Animações entre polígonos exigem o mesmo número de vértices.
Dúvidas sobre o Gerador de Clip-Path CSS
Como adicionar ou remover pontos de um polígono?
Clique numa marca da aresta para adicionar o ponto médio. Para remover, selecione o vértice e confirme a prévia; três pontos são o mínimo.
O clip-path afeta o tamanho do elemento no layout?
Não. O recorte muda o que aparece, mas não recalcula o tamanho da caixa nem o espaço ocupado no layout.
Por que o box-shadow não aparece na forma recortada?
A sombra do próprio elemento também é cortada pelo clip-path. Aplique box-shadow a um elemento externo para mantê-la visível.
Dá para animar uma forma clip-path?
É possível animar formas compatíveis no CSS, mas esta ferramenta exporta apenas uma forma estática. Os dois polígonos precisam ter a mesma quantidade de pontos.
Como fazer um clip-path responsivo com porcentagens?
Use porcentagens: cada ponto passa a acompanhar o tamanho do elemento. Pixels ficam associados à caixa de referência de 320 × 320 px.
Encontrou um problema na forma ou nas coordenadas?
Experimente o Gerador de Clip-Path CSS
Escolha uma forma, mova seus pontos e confira o recorte antes de copiar a declaração.
Volte a este Gerador de Clip-Path CSS quando precisar de outra borda geométrica personalizada.
Gerado no seu navegador.