Triângulos com CSS sem imagens

Já é possível criar formas geométricas apenas com propriedades CSS. Além disso, dá pra aplicar diversos efeitos e filtros, mas a maioria ainda não funciona no Internet Explorer (lógico). Como a técnica de criar triângulos funcionou em todos os navegadores que eu testei (não atendo mais ao IE6, mas funciona no 7) e pode ser muito útil para criar os controles de um slider sem ter que fazer mais imagens, estou passando abaixo o conceito.

Ilusão da propriedade border:

Devemos tudo à forma como os navegadores processam as bordas dos elementos.

Está caixa foi criada apenas com CSS. As cores das bordas foram definidas para que você perceba bem o que acontece.

Quando definimos as dimensões do elemento para 0 (zero), obtemos quatro triângulos que são formados pelas bordas:

E o código base fica assim:

.triangulo{
   width:0;
   height:0;
   border:30px solid #727170;
}

Agora basta ocultar as bordas que não queremos:

.direita{
   border-top:30px solid transparent;
   border-bottom:30px solid transparent;
   border-right:30px solid transparent;
}
.esquerda{
   border-top:30px solid transparent;
   border-bottom:30px solid transparent;
   border-left:30px solid transparent;
}
.pracima{
   border-top:30px solid transparent;
   border-left:30px solid transparent;
   border-right:30px solid transparent;
}
.prabaixo{
   border-bottom:30px solid transparent;
   border-left:30px solid transparent;
   border-right:30px solid transparent;
}

Use as classes no seu HTML assim:

<div class="triangulo direita"></div>
<div class="triangulo esquerda"></div>
<div class="triangulo pracima"></div>
<div class="triangulo prabaixo"></div>