CSS - Triângulos

É possível desenhar triângulos em uma página web utilizando apenas CSS. Eles são úteis para criar tooltips, setas, menus e etc.



A ideia é simples, basta criar um elemento com 0 de width e height. Além disso o elemento precisa ter bordas grandes como esta abaixo:

Tornando as bordas de cima, esquerda e direita transparentes você tem o triângulo:

Para fazer isto, basta inserir uma div com a devida classe para transformá-la em um triângulo, por exemplo:

 <div class="arrow-up"></div>  

No arquivo .css, definimos as seguintes regras de estilo para a classe "arrow-up"

 .arrow-up {  
      width: 0;   
      height: 0;   
      border-left: 5px solid transparent;  
      border-right: 5px solid transparent;  
      border-bottom: 5px solid black;  
 }