Gerador de Triângulo CSS

O gerador de triângulo CSS monta triângulos em CSS puro para você de forma visual, então você nunca mais precisa calcular larguras de borda ou coordenadas de clip-path na mão. Escolha uma direção, defina o tamanho e a cor, e copie o CSS pronto para colar em uma seta de tooltip, cursor de dropdown, chevron de breadcrumb ou fita de canto.

Ele oferece as duas técnicas clássicas. O truque da borda zera a largura e a altura do elemento e modela um triângulo colorido a partir de bordas transparentes, funcionando em todos os navegadores. O Clip-path usa clip-path: polygon() sobre uma caixa colorida para um código mais limpo e legível nos navegadores modernos. Ambos produzem a mesma forma, e você pode comparar os dois lado a lado antes de copiar.

Privado por concepção: cada triângulo é gerado localmente no seu navegador. Nada do que você configura é enviado para um servidor.

Como usar

Escolha uma direção

Clique em um dos 8 botões da grade de direções. As quatro direções principais (Cima, Direita, Baixo, 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 em ângulo reto.

Defina o tamanho

Arraste os controles de Largura e Altura ou digite valores exatos de 1 a 500 pixels. Ative Travar proporção para manter as duas dimensões iguais — alterar uma atualiza a outra.

Escolha uma cor

Use o seletor de cor para qualquer cor personalizada, ou clique em uma das amostras predefinidas para uma escolha rápida. A pré-visualização e o código gerado se atualizam na hora.

Selecione um método e copie

Alterne o Método entre Borda e Clip-path, use as abas de código para comparar os dois, depois clique em Copiar CSS para enviar o código direto para a área de transferência. Toque em Redefinir a qualquer momento para voltar aos valores padrão.

Recursos

8 direções

Aponte o triângulo para Cima, Direita, Baixo ou Esquerda para formas padrão, ou use as quatro direções diagonais para triângulos de canto em ângulo reto.

Controles precisos de tamanho

Defina largura e altura de forma independente de 1 a 500px com controles deslizantes ou campos numéricos, e trave a proporção para uma escala proporcional.

Personalização de cor

Escolha qualquer cor com o seletor de cor nativo ou use uma das 8 amostras predefinidas: índigo, escuro, branco, vermelho, verde, azul, âmbar e violeta.

Métodos Borda & Clip-path

Gere código com o clássico truque da borda transparente para máximo suporte, ou um polígono clip-path para um CSS moderno e mais limpo.

Pré-visualização ao vivo

Veja seu triângulo renderizado em tempo real sobre um fundo xadrez, com uma barra de informações mostrando as dimensões e a direção atuais.

Pré-visualização com escala automática

Triângulos grandes reduzem de tamanho automaticamente para caber na área de pré-visualização, mantendo proporções precisas.

12 predefinições prontas

Comece a partir de formas comuns — setas nas quatro direções, setas finas e largas, setas de tooltip, um cursor, triângulos de canto e uma bandeira.

Abas de código duplas

Veja e compare o CSS gerado para os dois métodos com o alternador de abas; o código se atualiza na hora conforme você muda qualquer configuração.

Cópia com um clique

Copie o CSS do método ativo para a área de transferência com um único clique, pronto para colar na sua folha de estilos.

Redefinir para os valores padrão

Volte a direção, o tamanho, a cor e o método para os valores iniciais a qualquer momento com o botão Redefinir.

Perguntas frequentes

Como fazer um triângulo em CSS?

As duas formas comuns são o truque da borda e o clip-path. Com este gerador você só escolhe uma direção, um tamanho e uma cor, depois copia o CSS — não há nenhuma conta para fazer na mão. Escolha o método Borda para o maior suporte de navegadores, ou Clip-path para um código moderno e mais limpo.

Como o truque da borda do CSS cria um triângulo?

Quando um elemento tem largura e altura zero, suas quatro bordas se encontram em linhas diagonais. Ao tornar algumas bordas transparentes e deixar apenas uma colorida, somente a área triangular dessa borda colorida permanece visível, o que forma a forma do triângulo.

Devo usar o truque da borda ou o clip-path?

Use o truque da borda quando precisar dar suporte a navegadores muito antigos, já que ele funciona em todos eles. Use o clip-path em projetos modernos onde você quer um CSS mais curto e legível, com largura e altura explícitas. Os dois produzem um triângulo visualmente idêntico, então você pode trocar o Método e comparar.

Como mudo a direção do triângulo?

Clique em qualquer um dos 8 botões de direção. As direções principais (Cima, Direita, Baixo, Esquerda) criam um triângulo padrão apontando para aquele lado, enquanto as direções diagonais (Superior esquerdo, Superior direito, Inferior esquerdo, Inferior direito) criam triângulos de canto em ângulo reto para fitas e efeitos de canto dobrado.

Posso criar triângulos equiláteros?

Sim. Para um triângulo que pareça equilátero apontando para cima ou para baixo, defina a largura como cerca de 1,15× a altura (por exemplo 115×100). Para um triângulo equilátero matematicamente exato, a largura deve ser igual à altura × 2 / √3.

Por que meu triângulo fica borrado em tamanhos pequenos?

Triângulos muito pequenos (abaixo de cerca de 10px) podem parecer borrados por causa da renderização em subpixel, que é uma limitação do navegador e não um problema do código. Use um tamanho um pouco maior, ou escolha dimensões que resultem em valores de borda em pixels inteiros, para manter as bordas nítidas.

Posso animar um triângulo CSS?

Sim. Triângulos do truque da borda podem animar a largura e a cor da borda. Triângulos com clip-path são mais flexíveis — você pode animar os pontos do polígono, a cor de fundo, a largura e a altura para transições de forma suaves.