Solución:
Aquí hay una flecha con puro CSS. Apoyado por todos navegadores. Me tomó menos de un minuto hacerlo …
jsFiddle
.arrow {
width: 120px;
}
.line {
margin-top: 14px;
width: 90px;
background: blue;
height: 10px;
float: left;
}
.point {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
float: right;
}
<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>
Creé esto, que puede usar para una flecha que apunta a la derecha.
En el script hay dos variables, widthofarrow y colorofarrow. Al cambiarlos, puede crear una flecha de cualquier tamaño o color.
http://jsfiddle.net/FKekh/3/
HTML:
<!DOCTYPE html>
<div id="main"></div>
CSS:
.rectcontainer {
height:30px;
}
.arrowblock {
}
.arrowright {
float:right;
}
.rect {
width:100px;
height:10px;
background-color:transparent;
}
JAVASCRIPT:
widthofarrow=130;
colorofarrow="#345678";
$("#main").append("<div class="arrowblock"><div class="arrowright"></div><div class="rectcontainer"><div class="rect"></div><div class="rect" style="background-color:" + colorofarrow + ""></div><div class="rect"></div></div></div>");
$('.arrowblock').css('width', widthofarrow + 'px');
$('.rectcontainer').css('width', (widthofarrow - (30)) + 'px');
$('.arrowright').css('border-top', (15) + 'px solid transparent');
$('.arrowright').css('border-bottom', (15) + 'px solid transparent');
$('.arrowright').css('border-left', (widthofarrow/4.333333333333333) + 'px solid ' + colorofarrow);
EDITAR
Actualicé el excelente código de JoshC para que pueda usarse para crear flechas de diferentes tamaños y colores.
http://jsfiddle.net/fqcFp/2/
¿Qué tal si usas una entidad html o un símbolo Unicode para tu flecha?
<div>→</div>
<div title="U+21A3: RIGHTWARDS ARROW WITH TAIL">↣</div>
div{
font-size: 40px;
}
VIOLÍN
Hay más para elegir aquí
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)