O que é o Gerador de Triângulos CSS?

O Gerador de Triângulos CSS é uma ferramenta visual que ajuda você a criar triângulos CSS de forma rápida e precisa. Em vez de calcular manualmente valores de borda ou coordenadas de clip-path, basta escolher sua direção, ajustar o tamanho e a cor, e copiar o código gerado.

Dois Métodos CSS

A ferramenta suporta dois métodos populares para criar triângulos CSS:

Clássico

Truque de Borda

A abordagem clássica usando bordas transparentes. Funciona em todos os navegadores, incluindo os mais antigos. O elemento tem largura e altura zero, com bordas coloridas criando a forma do triângulo.

Suporte máximo de navegadores
Compatível com IE11
Elemento com largura/altura zero

Moderno

Clip-path

Uma abordagem moderna usando clip-path: polygon(). Produz código mais limpo e legível com valores explícitos de largura e altura. O triângulo é criado recortando um retângulo colorido em uma forma triangular.

Estrutura de código mais limpa
Apenas navegadores modernos
Dimensões explícitas

Quando Usar Triângulos CSS

Setas de Tooltip

Pequenos triângulos apontando para conteúdo

Cursores de Menu Suspenso

Indicadores para menus expansíveis

Elementos Decorativos

Acentos geométricos em layouts

Separadores de Breadcrumb

Indicadores de navegação em estilo chevron

Fitas de Canto

Decorações diagonais nos cantos

Como Usar

Escolha uma Direção

Clique em um dos 8 botões de direção na grade. As quatro direções cardinais (superior, direita, inferior, esquerda) criam triângulos padrão, enquanto as quatro direções diagonais (superior-esquerdo, superior-direito, inferior-esquerdo, inferior-direito) criam triângulos de canto com ângulo reto.

Defina o Tamanho

Use os controles deslizantes de Largura e Altura ou digite valores exatos (1–500px). Clique no botão de bloqueio para manter uma proporção de 1:1 — alterar uma dimensão atualizará automaticamente a outra.

Escolha uma Cor

Use o seletor de cor para qualquer cor personalizada, ou clique em uma das amostras predefinidas para seleção rápida. A visualização e a saída de código são atualizadas instantaneamente.

Selecione um Método

Escolha entre Borda (truque de borda clássico) ou Clip-path (abordagem polygon moderna). Ambos produzem o mesmo resultado visual, mas com código CSS diferente.

Copie o Código

O painel de código CSS mostra o código gerado para o método ativo. Use o alternador de abas para comparar ambos os métodos. Clique em Copiar CSS para copiar o código para sua área de transferência.

Dica Pro: Navegue pela galeria de presets para formas de triângulo comuns. Clicar em um preset aplica instantaneamente sua direção e dimensões, facilitando começar de uma configuração conhecida e ajustar a partir daí.

Recursos

Suporte a 8 Direções

Crie triângulos apontando em qualquer uma das 8 direções. As quatro direções cardinais produzem triângulos isósceles, enquanto as direções diagonais criam triângulos com ângulo reto perfeitos para decorações de canto.

Controles de Tamanho Precisos

Ajuste largura e altura independentemente de 1 a 500 pixels usando controles deslizantes ou entrada de número direto.

Controle deslizante ou entrada direta
Opção de bloqueio de proporção
Intervalo de 1–500px

Personalização de Cor

Escolha qualquer cor usando o seletor de cor nativo, ou selecione rapidamente entre 8 amostras predefinidas cobrindo as cores mais comumente usadas.

Seletor de cor personalizado
8 amostras predefinidas
Atualizações de visualização instantâneas

Dois Métodos CSS

Gere código usando duas técnicas CSS diferentes:

Truque de borda — Suporte máximo de navegadores
Polygon clip-path — Código moderno mais limpo

Visualização ao Vivo

Veja seu triângulo renderizado em tempo real em um padrão de fundo em xadrez. Triângulos grandes são dimensionados automaticamente para caber na área de visualização mantendo proporções precisas.

Presets Integrados

12 presets cobrem casos de uso comuns com mini visualizações mostrando formas exatas.

Setas padrão (4 direções)
Cursores de tooltip e menu suspenso
Triângulos de canto e bandeiras

Geração de Código Instantânea: O código é atualizado instantaneamente conforme você modifica qualquer configuração, e o botão de cópia permite que você pegue o código com um único clique.

Perguntas Frequentes

Qual método devo usar — truque de borda ou clip-path?

Use o truque de borda se precisar suportar navegadores mais antigos (IE11 e anteriores). Use clip-path para projetos modernos onde você quer CSS mais limpo e legível. Ambos produzem resultados visualmente idênticos.

Recomendação: Para novos projetos direcionados a navegadores modernos, clip-path oferece código mais limpo e melhor manutenibilidade.

Como o truque de borda CSS cria um triângulo?

Quando um elemento tem largura e altura zero, suas bordas se encontram em linhas diagonais. Tornando algumas bordas transparentes e uma borda colorida, apenas a área triangular da borda colorida fica visível, criando a forma do triângulo.

Conceito-chave: O triângulo não é desenhado — é revelado ocultando partes da interseção de bordas.

Posso criar triângulos equiláteros?

Sim. Para um triângulo com aparência equilátera apontando para cima ou para baixo, defina a largura para cerca de 1,15× a altura (por exemplo, 115×100). Para triângulos equiláteros matematicamente precisos, a largura deve ser igual a altura × 2 / √3.

Aproximação visual: largura = altura × 1,15
Precisão matemática: largura = altura × 2 / √3 (≈ 1,1547)

Para que servem os triângulos de direção diagonal?

Triângulos diagonais (superior-esquerdo, superior-direito, inferior-esquerdo, inferior-direito) criam formas de canto com ângulo reto. Estes são comumente usados para:

Fitas e emblemas de canto
Cantos decorativos de página
Efeitos de canto dobrado em cartões
Acentos de design geométrico

Por que meu triângulo parece desfocado em tamanhos pequenos?

Triângulos muito pequenos (menos de 10px) podem parecer desfocados devido à renderização sub-pixel. Esta é uma limitação de renderização do navegador. Se possível, use tamanhos ligeiramente maiores ou garanta que as dimensões resultem em valores de borda em pixels inteiros.

Melhor prática: Mantenha as dimensões do triângulo em 10px ou maiores para renderização nítida em todos os navegadores.

Posso animar triângulos CSS?

Triângulos com truque de borda podem animar border-width e border-color. Triângulos clip-path oferecem mais flexibilidade — você pode animar os pontos do polygon, cor de fundo, largura e altura para transições de forma suave.

Método de Borda

Animação Limitada

Largura de borda
Cor de borda

Método Clip-path

Animação Completa

Pontos do polygon
Cor de fundo
Largura e altura
Transformação de forma