sábado, 16 de noviembre de 2013

Como hacer triángulos con css


Bienvenid@s, hoy os mostraré el código necesario para crear triángulos con CSS, el procedimiento consiste en asignar un mínimo de altura y anchura al elemento, por ejemplo un div, el mínimo suele ser 1 pixel, para amoldar los lados de los triángulos hay que hacerlo a través de la propiedad border, es decir a través de los bordes y jugar con las medidas, y a través de la transparencia ir dando forma a los lados del triángulo.

A continuación os mostraré el código y la figura correspondiente para cada ejemplo ...



#triangulo-1
{
width: 1px;
height: 1px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #4E5990;
}




#triangulo-2
{
width: 1px;
height: 1px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #F75C0E;
}




#triangulo-3
{
width: 1px;
height: 1px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid #FA2A3B;
}




#triangulo-4
{
width: 1px;
height: 1px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid #3BFA2A;
}