Softonic

Gerador de Triângulo CSS

Etapa 1 / 2
Próximo

O triângulo CSS clássico não é um triângulo de verdade, é um elemento de largura zero e altura zero com três bordas transparentes e uma borda colorida que se encontra em um ponto. Este gerador gera essa declaração para você em quatro direções (cima, baixo, esquerda, direita), dimensionado para o valor em pixels que você escolher e preenchido com a cor que você selecionar. Ótimo para setas de tooltip, balões de fala e separadores de breadcrumb.

Como construir um triângulo de borda

  1. 1

    Escolha uma direção

    Cima, baixo, esquerda ou direita. A direção determina qual borda recebe a cor e quais três permanecem transparentes.

  2. 2

    Defina o tamanho

    O valor do tamanho é usado para todas as larguras de borda. Um triângulo de 60px terá 120px de largura (ou altura, dependendo da direção).

  3. 3

    Escolha uma cor de preenchimento

    A entrada de cor só aceita valores hex (por exemplo `#10b981`); cores rgb, rgba ou nomeadas não são suportadas. A cor é aplicada apenas à borda do lado oposto.

  4. 4

    Copie a regra CSS

    A saída é um conjunto completo de regras `.triangle { ... }`, coloque-o em sua folha de estilo e adicione `<div class="triangle"></div>` onde necessário.

Por que o truque da borda funciona

Quando uma caixa tem width: 0 e height: 0, suas quatro bordas se encontram em um único ponto central. Como as bordas se encontram a 45 graus, cada borda já é um triângulo, três delas apenas acontecem de ser invisíveis. Faça uma borda colorida e você verá aquele triângulo.

Mapa de direções

Direção Borda visível Bordas transparentes
Cima border-bottom border-left, border-right, border-top
Baixo border-top border-left, border-right, border-bottom
Esquerda border-right border-top, border-bottom, border-left
Direita border-left border-top, border-bottom, border-right

Matemática de dimensionamento

Todas as três bordas transparentes compartilham o valor de tamanho. A borda visível usa o mesmo tamanho. Assim, um triângulo com size: 60:

  • Largura = 2 × 60 = 120px para triângulos cima/baixo
  • Altura = 2 × 60 = 120px para triângulos esquerda/direita

Se você precisar de um triângulo assimétrico (base mais estreita, ponto mais alto), dê às bordas transparentes um tamanho e à borda visível um tamanho diferente, por exemplo, border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; dá um triângulo alto e estreito para cima.

Quando optar por SVG em vez disso

  • Você precisa de múltiplos pontos, não três, use <polygon>.
  • O triângulo deve escalar fluidamente com o pai, use um viewBox e preserveAspectRatio.
  • Você quer um preenchimento gradiente, um contorno ou uma ponta arredondada, bordas CSS não podem fazer nenhum desses.

Perguntas frequentes

Não apenas com bordas, larguras de borda não aceitam % ou vw de forma bem suportada. Se você precisar de escalonamento fluido, mude para um SVG <polygon> ou use clip-path: polygon(...) em um elemento normal.

Você não pode arredondar o canto onde as bordas se encontram. Use um SVG com um caminho contornado e stroke-linejoin: round, ou clip-path: polygon(...) combinado com um leve filter: drop-shadow para mascarar a borda.

Sim, esse é o caso de uso mais comum. Posicione o triângulo absolutamente contra a borda do tooltip e combine a cor de preenchimento com o fundo do tooltip para que pareça uma única bolha.

Sim. A direção, o tamanho e a cor escolhidos são enviados ao nosso servidor junto com a solicitação da página, para que ele possa gerar o CSS. No fluxo passo a passo, eles também viajam no link da página. Não são armazenados.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Ferramenta disponível em outros idiomas