Como usar: Gerador de Triângulo CSS
- Clique em uma direção — para cima, para baixo, para a esquerda, para a direita ou em um dos cantos.
- Defina a largura, a altura e a cor.
- Escolha Borders (funciona em todos os navegadores, ideal para setas com
::before/::after) ou clip-path (mais fácil de ler e aceita gradientes). - Copie o CSS para um elemento ou pseudo-elemento.
Duas formas de desenhar um triângulo
O truque do border: um elemento com largura e altura zero mostra apenas suas bordas, e cada borda vira um triângulo que se encontra no meio. Deixe três transparentes e a quarta colorida, e você tem uma seta — sem precisar de imagens. O tamanho vem da espessura das bordas.
clip-path: uma caixa normal com clip-path: polygon(50% 0, 100% 100%, 0 100%). Mais fácil de entender e de dimensionar, e pode ser preenchida com um gradiente ou imagem.
Exemplo de seta para tooltip
.tooltip { position: relative; }
.tooltip::after {
content: "";
position: absolute; top: 100%; left: 50%; margin-left: -8px;
border: 8px solid transparent;
border-top-color: #111;
}Mais formas: Gerador de Clip-path, Gerador de Border Radius, Gerador de Blob SVG.
Também pesquisado como: gerador de triangulo css, triangulo css, seta css, seta tooltip css, triangulo com border css, caret css, formato triangulo css, seta balão de fala css.
Ferramentas que combinam com: Gerador de Triângulo CSS
- Gerador de Box Shadow — Empilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao vivo e copie o CSS de box-shadow ou text-shadow.
- Gerador de Máscara CSS — Faça imagens e seções desaparecerem gradualmente em vez de terminarem de forma abrupta: esmaeça uma borda, topo e base, as quatro bordas, uma vinheta radial ou um spotlight, corte o elemento em listras — ou aplique uma máscara com um formato (estrela, coração, hexágono, seta…) com bordas suaves e esfumadas, o que o clip-path não consegue.
- Gerador de CSS Grid — Defina as colunas, linhas e o espaçamento (gap), depois arraste sobre as células para criar áreas como header, sidebar e main.
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.
Perguntas frequentes
Como fazer um triângulo em CSS?
Dê ao elemento width: 0 e height: 0 e depois defina as bordas: para uma seta para cima, deixe as bordas esquerda e direita transparentes e a borda inferior colorida. Este gerador escreve o código para qualquer direção e tamanho.
Como adicionar uma seta a um tooltip?
Adicione um pseudo-elemento ::after com content: "", posicione-o na borda do tooltip e aplique as bordas do triângulo gerado aqui.
Triângulo com border ou clip-path?
Borders funcionam em todos os navegadores e são o padrão para setas pequenas em pseudo-elementos; o clip-path é mais fácil de dimensionar e aceita gradientes.
Um triângulo CSS pode ter borda ou sombra?
Sobreponha dois triângulos (um levemente maior, na cor da borda), ou use clip-path em um elemento envolvente com filter: drop-shadow() para criar a sombra.
Posso instalar o Gerador de Triângulo CSS como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Triângulo CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.