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

Gerador de Cartão CSS

Crie o CSS de um contêiner de cartão: fundo, borda, raio dos cantos, espaçamento interno e sombra suave, com pré-visualização imediata e código para copiar e colar.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Ferramenta disponível em outros idiomas