Comment puis-je faire une flèche pointue avec un div dans CSS

Comment puis-je faire une flèche pointue dans CSS? Pas seulement un triangle mais un avec une tige, comme une flèche traditionnelle qui serait tirée d'un arc?

J'essaie de le faire en créant un conteneur div, contenant deux conteneurs, à gauche et à droite. La droite contiendra le triangle, et la gauche contiendra trois divs, dont le centre sera coloré pour créer la tige.

Voici mon code:

HTML:

<div id="main"> <div class='arrowblock'> <div class='arrowright'></div> <div class='rectcontainer'> <div class='rect'></div> <div class='rect' style='background-color:green'> </div><div class='rect'> </div> </div>

CSS:

 .rectcontainer { height:30px; width:100px; } .arrowblock { width:130px; border-top: 15px solid transparent; } .arrowright { float:right; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 30px solid green; } .rect { width:100px; height:10px; background-color:transparent; }

Existe-t-il un moyen plus simple d'y parvenir?

Voici une flèche avec un CSS pur. Prise en charge de tous les navigateurs. Il m'a fallu moins d'une minute pour faire …

Entrez la description de l'image ici

JsFiddle

HTML

 <div class="arrow"> <div class="line"></div> <div class="point"></div> </div>

CSS

 .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; }

J'ai créé cela, que vous pouvez utiliser pour une flèche qui pointe vers la droite.

Dans le script sont deux variables, widthofarrow et colorofarrow. En les modifiant, vous pouvez créer une flèche de n'importe quelle taille ou couleur.

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);

MODIFIER

J'ai mis à jour le superbe code de JoshC afin qu'il puisse être utilisé pour créer des flèches de différentes tailles et couleurs.

http://jsfiddle.net/fqcFp/2/

Que diriez-vous simplement d'utiliser une entité html ou un symbole unicode pour votre flèche:

 <div>&#8594;</div> <div title="U+21A3: RIGHTWARDS ARROW WITH TAIL">↣</div> div{ font-size: 40px; }

VIOLON

Il y a plus à choisir ici

En prenant la réponse de Josh un peu plus loin, j'ai fait un exemple qui règle la largeur en fonction du conteneur en gardant un CSS pur. Merci @Josh pour le point de départ! Je soutiens certains navigateurs plus anciens, donc c'est bon pour moi. Nous pourrions utiliser la transformation pour faire pivoter la flèche comme nous l'aimons dans des navigateurs plus modernes. HTH

  <div class="RightArrow"> <div class="line"></div> <div class="point"></div> </div> <!-- for very short arrows reduce the width of .line --> <style> /* style tag added so SO will syntax color please use *.css irl*/ .RightArrow { width:90%; position: relative; } .line { margin-top:8px; width:97%; background:blue; height:0.3em; float:left; position: absolute; } .point { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 37px solid blue; float:right; } </style>