Triângulos com CSS puro

Publicado em 06/04/2016 - HTML/CSS

Vamos começar com algo bem simples, para esquentar os motores.

Imaginemos a seguinte situação: nosso amado cliente nos pede para colocar um "balãozinho" personalizado para indicar ao usuário qual a função de determinado botão.

"Igual aquele do gmail!", diz ele.

gmail

Prontamente você pensa como desenvolver o tal balãozinho, mas algo te chama a atenção... Como fazer aquela pontinha do balão?

Poderiamos utilizar uma imagem com transparência, sim, mas seria a melhor opção? E se precisarmos fazer com que a cor de fundo do balão seja modificável?

Com estas possibilidades em vista, esta técnica se mostra bem ineficiente. Precisamos de outra ideia.

E se... pudessemos fazer com que o próprio CSS gerasse um triângulo?

Para nossa sorte, sim, isto é possível. E o mais incrível: utilizaremos bordas!

Inicialmente, vamos imaginar um quadrado comum, com 100px de lado, e bordas de 1 px.

Para fins de ilustração, vamos imaginar que nosso quadrado é cinza, as bordas laterais são pretas e as bordas superior e inferior são azuis.

Se prestarmos atenção em como o navegador faz o render das bordas, podemos ver que ele mistura as cores das duas bordas no pixel em que elas se encostam. Mas o que aconteceria se aumentássemos o tamanho da borda?

Digamos que a borda agora seja não mais 1px, mas sim 30px.

Eis o resultado desta experiência, com ambos os tamanhos de borda.

quadrado com borda 30px

Interessante, não é mesmo? Perceba como o navegador fez o render da junção das bordas.

O que aconteceria se retirarmos a cor de fundo e as cores das bordas superior, direita e inferior do quadrado?

Imaginou? E se também reduzirmos o tamanho do quadrado?
Para 50px? Não, menos.
Para 25px? Não, ainda não...
0px! Agora sim.

Vamos ver como ficou:

quadrado com borda 30px

Enfim, alcançamos o nosso desejado triângulo.

Podemos agora modificar as proporções e a direção do triângulo.

Para fazer um trinagulo que "aponta" para a direita, utilizamos a borda esquerda.
Poderíamos fazer o inverso, caso o triângulo devesse apontar para a esquerda, ou seja, utilizariamos a borda direita
O mesmo vale para triângulos que apontem para cima ou para baixo.

Por fim, segue o código de 4 triângulos diferentes, para você estudar e utilizar em seus projetos.

Espero que sirva de ajuda.

Até mais e bons códigos!