Developer Tools
Design Tools
Web UtilitiesGerador de Clip Path CSS
Crie clip-path CSS para polígonos, círculos e elipses com um editor visual de arrastar e soltar. Use predefinições para formas comuns como setas, triângulos e estrelas. Copie o CSS instantaneamente.
Ponto 1
Ponto 2
Ponto 3
Ponto 4
Propriedade CSS
.element {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}Valor CSS
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)Ferramentas Relacionadas
Sobre Esta Ferramenta
Como Funciona
- Escolha um tipo de forma: polígono, círculo ou elipse
- Arraste os pontos de controle no canvas de pré-visualização para remodelar o clip path
- Ajuste as configurações com controles deslizantes e entradas para controle preciso
- Copie o valor CSS clip-path gerado para usar em suas folhas de estilo
- Use predefinições para formas comuns como setas, triângulos e estrelas
- Pré-visualize o clip path aplicado a uma imagem real ou fundo de cor sólida
Casos de Uso Comuns
- Criar recortes de imagem não retangulares para seções hero
- Construir divisores de seção diagonais ou em chevron
- Projetar fotos de perfil ou emblemas em forma de polígono
- Criar máscaras de imagem geométricas para galerias
- Construir botões de chamada para ação em forma de seta
- Projetar cards de UI e tooltips com formas personalizadas
Perguntas Frequentes
O que é CSS clip-path?
A propriedade CSS clip-path permite definir uma região de recorte para um elemento — apenas a parte dentro da região é visível, e tudo fora fica oculto. Suporta formas como polygon(), circle(), ellipse() e path(), permitindo criar elementos não retangulares, divisores diagonais e máscaras de imagem geométricas.
Como arrasto os pontos de controle na pré-visualização?
Quando o tipo de forma Polígono está selecionado, handles circulares azuis aparecem no canvas de pré-visualização em cada vértice do polígono. Clique e arraste qualquer handle para reposicioná-lo. A saída CSS é atualizada instantaneamente enquanto você arrasta.
O que significam as porcentagens X e Y?
As coordenadas do polígono clip-path são expressas como porcentagens da largura e altura do elemento. 0% 0% é o canto superior esquerdo, 100% 0% é o superior direito, 100% 100% é o inferior direito, e 0% 100% é o inferior esquerdo.
Como adiciono ou removo pontos do polígono?
Use o botão "+ Adicionar Ponto" para adicionar um novo ponto de controle no centro (50% 50%), depois arraste-o ou edite seus valores X/Y. Para remover um ponto, clique em "− Remover" ao lado dele. Um polígono requer pelo menos 3 pontos.
Que formas predefinidas estão disponíveis?
A ferramenta inclui 12 predefinições de polígono: Triângulo, Diamante, Seta Direita, Seta Esquerda, Pentágono, Hexágono, Estrela, Chevron, Inclinação Esquerda, Inclinação Direita, Chanfro e Rebaixo.
Como funciona o clip-path de círculo?
Selecionar o tipo de forma Círculo gera um valor clip-path: circle(r% at cx% cy%). O controle deslizante de raio controla o tamanho do círculo, e os deslizantes de centro X/Y movem o ponto central.
Qual é a diferença entre círculo e elipse?
Um clip-path de círculo recebe um único raio, produzindo uma forma de recorte perfeitamente redonda. Um clip-path de elipse recebe valores separados de raio X (rx) e raio Y (ry), permitindo criar formas ovais.
Como copio o CSS gerado?
Há dois botões de cópia na seção Saída CSS. "Copiar CSS" copia a regra CSS completa com o seletor .element. "Copiar Valor" copia apenas o valor clip-path para colar em uma regra existente.
O clip-path é suportado em todos os navegadores?
O CSS clip-path com formas básicas (polygon, circle, ellipse) é bem suportado em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. A propriedade não requer prefixos de fornecedor para formas básicas.
Posso animar formas clip-path?
Sim! O CSS clip-path pode ser transicionado e animado suavemente entre formas do mesmo tipo com o mesmo número de pontos. Por exemplo: "transition: clip-path 0.4s ease".
Como posso usar clip-path para divisores de seção?
Aplique um polígono clip-path a um elemento de seção de largura total para criar transições diagonais ou em chevron entre seções da página. Use as predefinições Inclinação Esquerda ou Direita como ponto de partida.
O que é a opção de imagem de fundo da pré-visualização?
Ao mudar o Fundo da Pré-visualização para "Imagem", a pré-visualização é preenchida com um gradiente (índigo a rosa) em vez de uma cor sólida. Isso ajuda a ver como o clip-path ficaria aplicado a uma foto ou fundo rico.