Hasta hace poco, siempre hice uso de imágenes cuando tenía que colocar un triángulo en las sitios web que desarrollaba, no era lo ideal, pero servía por el momento.

En este ejemplo, vamos a construir triángulos solo con HTML y CSS:

<style type="text/css">
    .triangulo{
        width:0px;
        height:0px;
    }
    .arriba{
        border-right: solid 50px transparent; /* lado del triangulo */
        border-bottom: solid 50px #2F2F2F; /* definimos el color */
        border-left: solid 50px transparent; /* lado del triángulo */
    }
    .derecha{
        border-top:50px solid transparent;
        border-bottom:50px solid transparent;
        border-left:50px solid #2F2F2F;
    }
    .abajo{
        border-top: solid 50px #2F2F2F;
        border-right: solid 50px transparent;
        border-left: solid10px transparent;
    }
    .izquierda{
        border-top: solid 50px transparent;
        border-bottom: solid 50px transparent;
        border-right: solid 50px #2F2F2F;
    }
    .recto-izquierda{ /* triángulo recto con dirección izquierda */
        border-bottom: solid 20px transparent;
        border-left: solid 20px #2F2F2F;
    }
</style>

Solo necesitas definir dos clases para la construcción de un triángulo, la primera debe ser .triangulo porque específicamos que estamos creando un triángulo, y la segunda puede ser .arriba, .derecha, .abajo, .izquierda, con ésta simplemente decimos cual será el sentido del triángulo.

El HTML:

<div class="triangulo arriba"></div><!-- triángulo con sentido hacia arriba -->

Y el ejemplo utilizando .triangulo y .arriba:

A continuación un par de ejemplos donde pueden aplicarse los triángulos: