Princípio de Geração de Triângulos via Bordas CSS
O modelo de caixa CSS inclui margens, bordas, preenchimento e conteúdo. A borda forma naturalmente um trapézio: a base inferior é definida pela propriedade border-width, enquanto a base superior depende do conteúdo interno da caixa.
.caixa-base {
/* Dimensões do conteúdo */
largura-interna: 30px;
altura-interna: 30px;
cor-da-borda: #ff0000 #00ff00 #0000ff #808080;
estilo-da-borda: sólido;
espessura-da-borda: 50px;
}
Quando as dimensões do conteúdo são definidas como zero, as bordas preenchem completamente a caixa e cada borda se torna um triângulo. Para obter um triângulo específico, basta tornar transparentes as bordas indesejadas, ocultando-as visualmente. Note que a ocultação é feita alterando a cor, não a espessura.
.elemento-triangular {
largura: 0;
altura: 0;
/* Compatibilidade com navegadores antigos */
altura-da-linha: 0;
tamanho-da-fonte: 0;
/* Todas as bordas inicialmente transparentes */
borda: 50px sólido transparente;
/* Triângulo apontando para a direita */
borda-esquerda: #808080;
}
A mesma lógica se aplica para criar triângulos em outras direções, alterando a borda visível.
Técnica Combinada: Posicionamento CSS com Triângulos
Para implementar estilos comuns em interfaces web, podemos combinar posicionamento reltaivo/absoluto com triângulos de borda. Consideer um contêiner principal com um elemento filho para formar o triângulo, utilizando o esquema de "filho absoluto, pai relativo".
<div class="container-principal">
<span class="indicador"></span>
</div>
.container-principal {
posicao: relativa;
largura: 300px;
altura: 180px;
cor-de-fundo: #98fb98;
}
.indicador {
posicao: absoluta;
superior: 15px;
/* Ajuste fino para posicionar no limite da caixa */
direita: -20px;
largura: 0;
altura: 0;
borda: 10px sólido transparente;
/* Triângulo direito com cor correspondente ao fundo */
borda-esquerda: #98fb98;
}
Essa abordagem permite criar efeitos visuais como balões de fala, dicas de ferrramentas ou indicadores de seta em menus.
Exemplo Completo de Implementação
O código a seguir demonstra a criação de triângulos em diferentes orientações e sua aplicação em um layout realista.
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Triângulos CSS com Bordas</title>
<style>
.demo-borda {
largura: 0;
altura: 0;
altura-da-linha: 0;
tamanho-da-fonte: 0;
borda: 50px sólido transparente;
}
.apontar-cima { borda-inferior: #e74c3c; }
.apontar-baixo { borda-superior: #e74c3c; }
.apontar-esquerda { borda-direita: #e74c3c; }
.apontar-direita { borda-esquerda: #e74c3c; }
.balao-esquerda {
posicao: relativa;
largura: 180px;
altura: 300px;
cor-de-fundo: #87ceeb;
}
.balao-esquerda .ponta {
posicao: absoluta;
superior: -20px;
direita: 15px;
largura: 0;
altura: 0;
borda: 10px sólido transparente;
borda-inferior: #87ceeb;
}
</style>
</head>
<body>
<div class="demo-borda apontar-cima"></div>
<div class="demo-borda apontar-baixo"></div>
<div class="demo-borda apontar-esquerda"></div>
<div class="demo-borda apontar-direita"></div>
<div class="balao-esquerda">
<span class="ponta"></span>
</div>
</body>
</html>