Gerador de caminhos de recorte CSS Clip-Path

Gere visualmente código de caminhos de recorte CSS clip-path, com suporte a formas como polígonos, círculos e elipses, e processamento de imagens em lote

Relatório de bug

Modo de execução no navegador: Seus dados são processados no navegador e não são enviados ao servidor.

Velocidade e estabilidade: A velocidade de processamento depende do seu dispositivo e navegador. Para trabalhos em lote grandes, a versão para desktop pode ser mais estável.

Carregando ferramenta, aguarde...

Se a ferramenta online não carregar ou executar, tente a ferramenta para desktop. https://tools.yikeaigc.com/

Uso da ferramenta

Voltar para a versão antiga

Defina o caminho de corte antes de copiar o código ou processar imagens em lote

Após escolher uma forma predefinida, arraste os pontos do polígono ou alterne para círculo, elipse ou retângulo inset e ajuste os parâmetros. O lote usará o caminho atual. Ao enviar várias imagens, só as 20 primeiras serão exibidas, mas todas serão processadas.

Informações do caminho atual

Tipopolygon

Pontos de controle3

Dica: conclua a configuração do caminho antes de copiar o código ou processar imagens.

Prévia em tempo real No modo polígono, arraste os pontos azuis; as coordenadas geram o CSS automaticamente.

Coordenadas: relativas ao próprio elemento; canto superior esquerdo é 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Forma e predefinições Escolha o tipo e ajuste os parâmetros

Tipo de forma

Categoria predefinida

Parâmetros do caminho Valores aceitam porcentagem

Texto das coordenadas

Raio

Centro X

Centro Y

Raio horizontal

Raio vertical

Centro X

Centro Y

上

Dir.

abaixo

Zuo

Cantos arredondados

Prévia e saída O fundo afeta apenas a prévia e a exportação da imagem

Largura da prévia (px)

Altura da prévia (px)

Cor A

Cor B

Ângulo do gradiente

Prévia da imagem

Mostrar bordas do elemento Incluir prefixo -webkit Gerar seletor de classe

Gerar código

O código será atualizado em tempo real.

Aplicar caminho atual em lote Defina o caminho na etapa anterior antes de processar imagens.

Clique ou arraste imagens Suporta JPG, PNG, WebP, GIF, BMP e outros formatos comuns

Nenhuma imagem selecionada.

Configurações de saída PNG suporta fundo transparente

Formato de saída

Modo de tamanho

Limitar lado maior (px)

Largura personalizada (px)

Altura personalizada (px)

Qualidade de saída92%

Fora do corte transparente Usar caminho atual

Aguardando processamento.

Prévia e resultados da imagem Após o upload, mostra as 20 primeiras; o processamento inclui todos os arquivos.

Imagens pendentes0 imagens

Selecione imagens para ver miniaturas.

Resultado0 imagens

Miniaturas dos resultados aparecem após o processamento.

Instruções

Instruções de uso do software

Desenhar o caminho de recorte: Depois de entrar na ferramenta, primeiro selecione o tipo de forma na etapa “Desenhar caminho”. Pode usar polígono, círculo, elipse ou retângulo inset.
Selecionar uma forma predefinida: Pode escolher predefinições entre formas básicas, setas e ícones, e formas decorativas, ajustando depois os parâmetros conforme necessário.
Editar parâmetros do caminho: Para polígonos, pode arrastar os pontos de controlo ou inserir coordenadas percentuais na caixa de texto de coordenadas; para círculos, elipses e retângulos inset, pode preencher diretamente o raio, o ponto central, as margens e os cantos arredondados.
Configurar o efeito de pré-visualização: Pode ajustar a largura e altura da pré-visualização, as cores do gradiente e o ângulo do gradiente, ou escolher uma imagem como conteúdo de pré-visualização.
Copiar o código CSS: Depois de confirmar o efeito, clique em “Copiar clip-path” ou “Copiar CSS”; pode escolher se deseja incluir o prefixo -webkit e o seletor de classe.
Processar imagens em lote: Clique em “Próximo passo: processamento em lote”, selecione várias imagens, configure o formato de saída, a qualidade e o modo de tamanho, e inicie o processamento.
Transferir resultados: Quando o processamento estiver concluído, clique em “Transferir todos os resultados em ZIP”. Os ficheiros de saída tentarão manter os nomes dos ficheiros originais e, em caso de nomes repetidos, serão adicionados números automaticamente para os distinguir.

Perguntas frequentes

R: clip-path é usado para recortar um elemento numa forma específica, sendo comum em apresentações de imagens com formas irregulares, design de bordas de cartões, formatos de botões, elementos decorativos de páginas web e efeitos interativos.

R: polygon cria um polígono através de vários pontos de coordenadas; circle cria uma área de recorte circular; ellipse cria uma área de recorte elíptica; inset cria um retângulo inset e também suporta parâmetros de cantos arredondados.

R: As coordenadas são expressas em percentagem; por exemplo, 50% 0% representa a posição central no topo do elemento, e 100% 100% representa o canto inferior direito. Cada ponto deve ser separado por vírgula e são necessários pelo menos 3 pontos.

R: -webkit-clip-path é usado para compatibilidade com alguns ambientes baseados no motor WebKit. Para aumentar a compatibilidade, pode manter tanto a versão com prefixo como a sintaxe padrão.

Resposta: é possível selecionar formatos de imagem comuns como entrada, e a saída é compatível com PNG, JPEG e WebP. PNG é ideal para manter áreas transparentes, JPEG é indicado para gerar arquivos menores, e WebP equilibra tamanho e qualidade de imagem.

Resposta: a ferramenta tentará manter o nome original do arquivo e substituirá a extensão conforme o formato de saída. Se houver arquivos com o mesmo nome, um número será adicionado ao final do nome para evitar que os resultados sejam sobrescritos.