Usando bordes transparentes, se pueden generar infinidad de formas usando css:
.multiborde {
border-color: green red blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}.flechaiz {
border-color:transparent #000 transparent transparent;
border-style:solid;
border-width:10px 20px 10px 0;
width:0;
}
.flechader {
border-color:transparent transparent transparent #000;
border-style:solid;
border-width:10px 10px 10px 20px;
width:0;
}
.flechatop {
border-color:transparent transparent #000000;
border-style:solid;
border-width:0 13px 13px;
width:0;
}
.flechabot {
border-color:transparent transparent #000000;
border-style:solid;
border-width:0 13px 13px;
width:0;
}
Hola muy interesante los triángulos en css pero no se ve correctamente en IE6.
Ya sé que está obsoleto pero aún muchos millones de usuarios lo utilizan.
Un saludo y gracias
A pesar de tener 3 años, sigue siendo un buen truco.
Para los que vengan buscando lo mismo que yo, quiero comentar algo más.
Este truco es básicamente hacer transparentes los bordes de 3 en 3, y salen las 4 flechas.
Pero también se pueden hacer las de las esquinas, es decir, superior derecha, superior izquierda, inferior derecha e inferior izquierda. Sólo hay que hacer transparentes los bordes de 2 en 2 y salen las 4 esquinas.