Gerador de Triângulos CSS
Gere um triângulo puro em CSS apontando em qualquer uma das 8 direções — o truque clássico de borda de tamanho zero ou um polígono clip-path moderno — com sua própria largura, altura e cor, além do snippet HTML e uma visualização SVG. Executa inteiramente no seu navegador.
Entrada
Para onde o triângulo aponta — as quatro direções cardinais, ou uma cunha de ângulo reto.
Border funciona em qualquer lugar, mas não deixa caixa de conteúdo; clip-path mantém uma caixa real onde você pode colocar um gradiente.
Usado para a regra gerada e o snippet HTML.
Saída
Seu triângulo aparecerá aqui.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-triangle-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"direction": "up",
"technique": "border",
"width": "100",
"height": "100",
"color": "#464aff",
"className": "triangle"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-triangle-generator` tool (CSS Triangle Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-triangle-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Triângulos CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
Um triângulo é uma das poucas formas para as quais CSS não possui um primitivo. Não há shape: triangle, então você finge — abusando de como as bordas se encontram em um canto, ou cortando um retângulo em três pontos. Este gerador escreve ambos para você: escolha uma direção, defina largura, altura e cor, e copie a regra finalizada.
Como usar
- Escolha a direção para a qual o triângulo aponta — para cima, para baixo, esquerda, direita, ou uma das quatro cunhas de ângulo reto (superior esquerdo, superior direito, inferior direito, inferior esquerdo).
- Escolha uma técnica: o truque de borda ou um polígono
clip-path(veja abaixo para saber qual escolher). - Arraste largura e altura até a visualização parecer correta. Cada direção é totalmente redimensionável, incluindo cantos.
- Defina a cor e, se desejar, um nome de classe — ele é usado na regra CSS e no snippet HTML.
- Copie o CSS e o snippet
<div>, ou baixe a visualização SVG se preferir usar uma imagem.
Truque de borda ou clip-path?
O truque de borda fornece a um elemento width: 0; height: 0 e uma border espessa. Porque as bordas adjacentes se encontram ao longo de uma diagonal, cada uma das quatro regiões de borda é ela mesma um triângulo — colora uma, torne as outras três transparent, e o resultado visível é um triângulo. Funciona em todos os navegadores já enviados, incluindo clientes de email, é por isso que ainda é o padrão.
Seu custo é que não há caixa de conteúdo deixada. Você não pode colocar texto ou um ícone dentro do elemento, não pode dar ao triângulo um gradiente ou uma imagem de fundo, e não pode animar sua forma — apenas suas larguras de borda.
clip-path: polygon() mantém uma caixa width × height real com um background real, depois corta tudo fora de três pontos. Isso significa que o triângulo pode ter um gradiente, uma imagem de fundo ou uma sombra de caixa (via filter: drop-shadow()), e o próprio polígono pode ser transitado. O suporte é universal em navegadores modernos, mas ausente em mecanismos legados e não confiável em email.
Regra geral: clip-path para qualquer coisa em um site moderno, truque de borda para o máximo alcance ou para pequenas setas decorativas onde nenhuma limitação importa.
O que os números significam
Para um triângulo cardinal, largura é o comprimento da base e altura é a distância da base ao ápice. Na regra de borda gerada, isso aparece como duas meias larguras nos lados (um triângulo ascendente de 100px de largura obtém 0 50px 100px 50px).
Para uma cunha de canto, largura e altura são as duas pernas do ângulo reto, e elas mapeiam diretamente para duas larguras de borda — sem divisão. É também por isso que as cunhas de canto são redimensionáveis aqui, mesmo que alguns geradores as bloqueiem para um quadrado.
Ele funciona na minha máquina?
Sim. A regra, o snippet HTML e a visualização SVG são todos construídos em seu navegador — nada é carregado, e a ferramenta funciona offline depois que a página foi carregada.
Posso usar isso para uma dica de ferramenta ou seta suspensa?
Esse é o uso clássico. Gere um pequeno triângulo descendente (digamos 12 × 6), depois posicione-o com position: absolute contra o corpo da dica de ferramenta. Use a técnica de borda aqui — a seta é decorativa, portanto a caixa de conteúdo ausente não custa nada, e você obtém suporte em qualquer lugar.
E se eu precisar de uma forma diferente?
Para qualquer coisa com mais de três pontos — hexágonos, estrelas, setas, bolhas de fala — use o Gerador de Clip-Path CSS, que constrói polígonos arbitrários e outras formas de clipe. Para arredondar os cantos de uma caixa normal, consulte o Gerador de Raio de Borda; para girar ou distorcer o triângulo depois de obtê-lo, o Gerador de Transformação CSS escreve o valor transform correspondente.