Triangulos en CSS / Triangles en CSS

CSS_triangle.css

/* 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;
}

/* Triangle (Pico derecho)*/
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;               
}