Tutorial: Triangulos con CSS

Una técnica que siempre me ha llamado la atención y lleva un tiempo circulando por la red, es crear triángulos con la única ayuda de nuestra hoja de estilos. Esto es muy sencillo si usamos los bordes de una forma particular.

CSS

Para crear nuestros triangulos, necesitamos un div vacío con width y height 0

.triangle{
 border-color: #f00 #0F0 #00F #DDD;
 border-style: solid;
 border-width: 20px;
 height:0;
 width:0;
}

Este código resultaría en un cuadrado compuesto de 4 triángulos de colores:Pero, ¿Que hacemos si solo queremos un triangulo?

.triangle{
 border-color: #f00 transparent transparent transparent;
 border-style: solid;
 border-width: 20px;
 height:0;
 width:0;
}

Como veis, aplicando un color transparente a los demás bordes, conseguimos quedarnos solo con el triángulo superior:También podeis experimentar con border-style para conseguir todo tipo de efectos:

Ejemplo práctico

Yo he creado un ejemplo que podriamos usar en nuestros diseños, por ejemplo en los comentarios de un blog o como en mi caso, en un chat web o sistema de mensajería.

Para ver cómodamente el código, podéis descargarlo y ver la demo.

Links: Descarga | Ejemplo

Advertisement

Etiquetas: CSS, triangulos, tutorial