Ferramentas para desenvolvedores
Gerador de Triângulos CSS
Gere código CSS para criar triângulos com contornos e tamanhos personalizados para os seus projetos web.
Executar ferramenta
O gerador de triângulos CSS cria o código de estilos baseado em limites para construir formas geométricas sem imagens externas. O utilizador pode configurar a direção e a dimensão pretendida em píxeis. O cálculo ajusta automaticamente as quatro larguras de contorno a partir do tamanho inserido, definindo largura e altura a zero com estilo sólido. Estão disponíveis orientações cardinais como cima, baixo, esquerda ou direita, além de ângulos diagonais como superior esquerdo, superior direito, inferior esquerdo e inferior direito. Se introduzir uma direção não reconhecida, o código recorre à geometria padrão virada para cima, mantendo o nome fornecido no seletor. É importante notar que o campo de cor disponibilizado no formulário não altera as propriedades finais, emitindo sempre regras transparentes que pode personalizar depois na sua folha de estilos. O resultado pode ser copiado diretamente para as suas folhas de estilo e integrado em botões, tooltips ou caixas de diálogo.
Instruções
- Indique a direção pretendida para o triângulo (por exemplo: up, down, left, right, top-left, top-right, bottom-left ou bottom-right).
- Defina o tamanho pretendido em píxeis no campo correspondente.
- Execute a ferramenta para gerar as declarações CSS com as larguras de contorno calculadas.
- Copie o bloco de regras CSS apresentado no painel e integre-o no seu ficheiro de estilos.
Exemplos
- Tamanho definido em 30 com direção 'up': gera regras CSS com dimensões nulas e larguras de limites adaptadas para formar uma seta orientada para cima.
- Tamanho definido em 50 com direção 'top-left': produz a estrutura de limites com proporções para um triângulo reto no canto superior esquerdo.
Perguntas frequentes
Como é gerada a forma do triângulo em CSS?
A forma resulta da combinação de um elemento com largura e altura a zero, aplicando contornos sólidos com diferentes larguras em cada lado.
O campo de cor altera o CSS gerado?
Não, a ferramenta gera contornos com cores transparentes. Para definir a cor visível do triângulo, edite a cor do contorno diretamente no CSS obtido.
O que acontece se indicar uma direção não suportada?
Se a direção não coincidir com as opções suportadas, a ferramenta aplica as proporções de contorno da orientação para cima e coloca o texto inserido no seletor.
Quais são as direções suportadas?
Pode utilizar up, down, left, right, top-left, top-right, bottom-left e bottom-right.