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.
Sigueme con tu lector de feeds
Sígueme en Twitter
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,
Gracias por la info! suerte ;)!