CSS: dibujar triángulos

Algunos ejemplos utilizando solo código css para crear formas con aspecto de triángulo:

Triangulo CSS (pico superior)

.triangulo_sup {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #000;
}

Triangulo CSS (pico inferior)

.triangulo_inf {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #000;
}

Triangulo CSS (pico izquierda)

.triangulo_izq {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid #000;
    border-bottom: 50px solid transparent;
}

Triangulo CSS (pico derecha)

.triangulo_der {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid #000;
    border-bottom: 50px solid transparent;
}

Triangulo CSS (pico superior izquierdo)

.triangulo_top_left {
    width: 0;
    height: 0;
    border-top: 100px solid #000; 
    border-right: 100px solid transparent;			
}

Triangulo CSS (pico superior derecho)

.triangulo_top_right {
    width: 0;
    height: 0;
    border-top: 100px solid #000; 
    border-left: 100px solid transparent;			
}

Triangulo CSS (pico inferior izquierdo)

.triangulo_bottom_left {
    width: 0;
    height: 0;
    border-bottom: 100px solid #000; 
    border-right: 100px solid transparent;			
}

Triangulo CSS (pico inferior derecho)

.triangulo_bottom_right {
    width: 0;
    height: 0;
    border-bottom: 100px solid #000; 
    border-left: 100px solid transparent;				
}