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-right: 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;
}

Webmaster