Truque do border vs. clip-path, qual usar?

O truque do border funciona em navegadores antigos como IE11 e em todos os navegadores modernos. clip-path suporta formas mais complexas mas pode não ser compatível com navegadores antigos. Qualquer um é aceitável para projetos modernos.

Posso criar um triângulo equilátero?

Você pode aproximá-lo ajustando a proporção de largura e altura. Para um triângulo para cima, tente começar com largura ≈ altura × 2.

Os dados são enviados para algum servidor?

Não. Tudo é gerado localmente no seu navegador. Nenhum dado é transmitido.

Posso fazer um triângulo responsivo?

Sim. Substitua manualmente os valores em px gerados por unidades em, rem ou vw para que o triângulo seja responsivo.

Pode gerar o CSS de um balão de fala completo?

Esta ferramenta foca exclusivamente em gerar o CSS para a parte do triângulo. Um balão de fala completo é normalmente implementado combinando o triângulo com os pseudo-elementos ::before/::after.

🔺

css triangle,

Gerador de Triângulos CSS

Crie triângulos CSS com a técnica do border.
Escolha direção, tamanho e cor — copie o código instantaneamente.

🔺

8 Direções

Cima, baixo, esquerda, direita + 4 diagonais

📋

Copiar com Um Clique

Gere e copie o CSS instantaneamente

⚡

Pré-visualização ao Vivo

Atualiza em tempo real

Largura

Altura

Cor

Cor Fundo

Pré-visualização

100px × 80px

Código Gerado

Incluir wrapper (centralizado)

CSS

about,

Sobre

O Gerador de Triângulos CSS cria triângulos usando o clássico truque do border — sem imagens. Compatível com 8 direções (cima, baixo, esquerda, direita e 4 diagonais).

Perfeito para balões de chat, setas em menus suspensos, chevrons de navegação e qualquer decoração UI. O código gerado pode ser colado diretamente no seu projeto. Tudo é processado localmente no navegador.

how to,

Como Usar

PASSO 1

Escolha a direção

Selecione uma das 8 posições do grid 3×3 para apontar o triângulo.

PASSO 2

Ajuste os parâmetros

Use os sliders de largura e altura, e o seletor de cor para personalizar o triângulo. A pré-visualização atualiza em tempo real.

PASSO 3

Copie o código

Clique em "Copiar CSS" ou "Copiar HTML" para levar o código à área de transferência e colá-lo no seu projeto.

glossary,

Glossário

Truque do border: Técnica CSS para criar triângulos definindo width e height em 0, depois aplicando bordas de cores e transparentes.
transparent: Valor de cor CSS que significa completamente transparente. Usado para ocultar os lados indesejados da borda.
clip-path: Propriedade CSS que recorta elementos com formas personalizadas. Alternativa ao truque do border com maior flexibilidade mas maior complexidade.
Balão (Speech Bubble): Elemento UI em forma de globo para chats ou tooltips. O triângulo forma a "cauda" que aponta para o emissor.
Pseudo-elemento (::before/::after): Elementos virtuais de CSS usados para adicionar o triângulo a uma caixa sem HTML adicional.

faq,

FAQ

Q.Truque do border vs. clip-path, qual usar?: O truque do border funciona em navegadores antigos como IE11 e em todos os navegadores modernos. clip-path suporta formas mais complexas mas pode não ser compatível com navegadores antigos. Qualquer um é aceitável para projetos modernos.
Q.Posso criar um triângulo equilátero?: Você pode aproximá-lo ajustando a proporção de largura e altura. Para um triângulo para cima, tente começar com largura ≈ altura × 2.
Q.Os dados são enviados para algum servidor?: Não. Tudo é gerado localmente no seu navegador. Nenhum dado é transmitido.
Q.Posso fazer um triângulo responsivo?: Sim. Substitua manualmente os valores em px gerados por unidades em, rem ou vw para que o triângulo seja responsivo.
Q.Pode gerar o CSS de um balão de fala completo?: Esta ferramenta foca exclusivamente em gerar o CSS para a parte do triângulo. Um balão de fala completo é normalmente implementado combinando o triângulo com os pseudo-elementos ::before/::after.