Tutorial: Triangulos con CSS

15 Jul

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

3 comentarios to “Tutorial: Triangulos con CSS”

  1. delprado 16 marzo 2012 a 16:16 #

    No existe la manera de crear una capa triangular para poner dentro una imagen triangular o algo asi…
    |\–
    | \ |
    |_\|

    algo así… no se como hacerlo, cualquier sugerencia es bienvenida,

  2. alephcelis 31 agosto 2012 a 09:16 #

    Gracias por la info! suerte ;)!

Trackbacks/Pingbacks

  1. Bitacoras.com - 15 julio 2010

    Información Bitacoras.com…

    Valora en Bitacoras.com: 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. …..

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: