Ferramentas para desenvolvedores
Gerador de CSS Clip-Path
Gere regras CSS de clip-path com formas geométricas, círculos, elipses e polígonos para criar máscaras visuais.
Executar ferramenta
O gerador de clip-path CSS cria fragmentos de código prontos a utilizar para aplicar máscaras de corte em elementos HTML. A ferramenta disponibiliza modelos predefinidos para figuras geométricas comuns, incluindo círculo, elipse, triângulo, hexágono, pentágono, estrela e losango. Nas formas circulares e elípticas, os valores introduzidos de dimensão e coordenadas determinam diretamente a percentagem do raio e o ponto de ancoragem no elemento. Nas formas poligonais, como o triângulo ou o pentágono, a declaração CSS é construída com coordenadas fixas em percentagem, assegurando uma silhueta proporcional sem configurações manuais complexas. Caso introduza um nome de forma não reconhecida, a ferramenta aplica a geometria circular padrão com os parâmetros indicados. Pode copiar o código CSS final diretamente para a sua folha de estilos ou integrá-lo em regras dinâmicas no seu projeto de desenvolvimento web, obtendo recortes visuais limpos sem recorrer a ficheiros de imagem externos adicionais.
Instruções
- Introduza o nome da forma pretendida no campo correspondente, como circle, ellipse, triangle, hexagon, pentagon, star ou diamond.
- Indique o valor numérico para o tamanho percentual, aplicável a formas circulares e elípticas.
- Defina a posição no elemento, como center, top ou coordenadas como top left para formatos circulares.
- Execute a ferramenta para gerar a regra CSS com a declaração clip-path.
- Copie a linha de código CSS resultante para o bloco de estilos do seu projeto.
Exemplos
- Configuração de círculo: ao definir a forma como circle, o tamanho em 40 e a posição em center, a ferramenta produz clip-path: circle(40% at center);
- Configuração de elipse: ao escolher ellipse com tamanho 60 e posição top, o resultado apresenta clip-path: ellipse(60% 36% at top);
- Configuração de polígono: ao selecionar star, o gerador apresenta uma declaração polygon com coordenadas fixas em percentagem para os vértices da estrela.
Perguntas frequentes
O que acontece se introduzir um nome de forma não suportada?
Se o nome da forma não corresponder a uma das opções reconhecidas, a ferramenta utiliza a geometria circular padrão mantendo os valores de tamanho e posição indicados.
Como é calculada a proporção da forma elíptica?
Na elipse, o primeiro raio utiliza o valor numérico de tamanho fornecido e o segundo raio corresponde a 60% desse mesmo valor, posicionados no ponto indicado.
Os parâmetros de tamanho e posição afetam as formas poligonais?
Não. Formas como triângulo, hexágono, pentágono, estrela e losango utilizam modelos poligonais com coordenadas percentuais predefinidas que não variam com o tamanho ou posição.