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; }
No hay comentarios:
Publicar un comentario