Comment faire une flèche fantaisie en utilisant CSS?

102

Ok, donc tout le monde sait que vous pouvez créer un triangle en utilisant ceci:

#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

Et cela produit un solide, rempli de triangle. Mais comment feriez-vous un triangle en forme de flèche de type creux, comme celui-ci?

une flèche avec seulement deux lignes qui se croisent au point. Comme un signe supérieur à:>

html css css-shapes

— Tommay
source

3

Deux rectangles tournés.

— SLaks

51

jsfiddle.net/j08691/a0uogod0

— j08691

5

Vous utilisez une très grande police?

— GolezTrol

2

AAAAAHHHH. j08691 l'a compris. Merci!

— Tommay

4

Check @ j08691 Fiddle son droit sur l'argent. Une autre façon d'y parvenir est d'utiliser un pack de polices comme Awesome Fonts fortawesome.github.io/Font-Awesome/icon/chevron-right

— crazymatt

93

Vous pouvez utiliser le beforeou afterpseudo-élément et appliquer un CSS à elle. Il existe différentes manières. Vous pouvez ajouter à la fois beforeet after, et faire pivoter et positionner chacun d'eux pour former l'une des barres. Une solution plus simple consiste à ajouter deux bordures uniquement à l' beforeélément et à le faire pivoter à l'aide de transform: rotate.

Faites défiler vers le bas pour une solution différente qui utilise un élément réel au lieu des pseuso éléments

Dans ce cas, j'ai ajouté les flèches sous forme de puces dans une liste et utilisé des emtailles pour les faire dimensionner correctement avec la police de la liste.

ul {
    list-style: none;
}

ul.big {
    list-style: none;
    font-size: 300%
}

li::before {
    position: relative;
    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
    content: "";
    display: inline-block;
    /* By using an em scale, the arrows will size with the font */
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}

/* Change color */
li:hover {
  color: red; /* For the text */
}
li:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

<ul class="big">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

Développer l'extrait

Bien sûr, vous n'avez pas besoin d'utiliser beforeou after, vous pouvez également appliquer la même astuce à un élément normal. Pour la liste ci-dessus, c'est pratique, car vous n'avez pas besoin de balisage supplémentaire. Mais parfois, vous pouvez vouloir (ou avoir besoin) du balisage de toute façon. Vous pouvez utiliser un divou spanpour cela, et j'ai même vu des gens recycler l' iélément pour des «icônes». Donc, ce balisage pourrait ressembler à ci-dessous. Il <i>est discutable de savoir si l'utilisation pour cela est correcte, mais vous pouvez également utiliser span pour cela pour être du bon côté.

/* Default icon formatting */
i {
  display: inline-block;
  font-style: normal;
  position: relative;
}

/* Additional formatting for arrow icon */
i.arrow {
    /* top: 2pt; Uncomment this to lower the icons as requested in comments*/
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
}

And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.

Développer l'extrait

Si vous cherchez plus d'inspiration, assurez-vous de consulter cette impressionnante bibliothèque d' icônes CSS pures par Nicolas Gallagher . :)

— GolezTrol
source

Cela a plutôt bien fonctionné, mais il y a quelques choses qui doivent être modifiées. 1. Comment déplacer légèrement la flèche vers le bas sans déplacer le reste du texte avec elle? J'ai essayé #arrow :: after, puis en définissant une marge en haut, mais cela a tout déplacé vers le bas, y compris le texte. 2. J'en ai besoin pour changer de couleur au survol de la souris. Pour le moment, seul le texte change de couleur. Comment changer le texte et la flèche?

— Tommay

Pour changer la couleur de la flèche, vous devrez changer le border-color, puisque la flèche n'est en fait pas un caractère mais une bordure. Pour le positionnement, vous pouvez ajouter position: relativeà la flèche et la déplacer en utilisant topet left. J'ai montré à la fois dans le premier extrait de code modifié et le positionnement dans le deuxième extrait. Notez la belle combinaison li:hover::beforequi fait référence au beforepseudo-élément d'un élément de liste survolé.

— GolezTrol

En fait, encore une chose: j'essaie donc de centrer ce texte maintenant (avec l'élément après). Le problème est que cet élément postérieur occupe apparemment beaucoup d'espace invisible et que, par conséquent, le texte semble extrêmement décentré. Comment définirais-je cet espace invisible à 0? J'ai essayé left: 0 et right: 0, avec margin-left: 0 et margin-right: 0, aucun n'a fonctionné.

— Tommay

Je ne sais pas exactement ce que vous voulez dire, mais le pseudo-élément a déjà une marge 0par lui-même, vous auriez donc besoin d'une marge négative pour annuler tout espace blanc. Par exemple, dans le deuxième extrait de code, vous pouvez ajouter margin-left: -0.4em;pour placer la flèche à côté du mot précédent sans espace.

— GolezTrol

J'ai posté une nouvelle question sur stackoverflow.com/questions/27549099/…

— Tommay

71

Cela peut être résolu beaucoup plus facilement que les autres suggestions.

Dessinez simplement un carré et appliquez une borderpropriété à seulement 2 côtés de jonction.

Ensuite, faites pivoter le carré selon la direction dans laquelle vous voulez que la flèche pointe, par exemple: transform: rotate(<your degree here>)

.triangle {
    border-right: 10px solid; 
    border-bottom: 10px solid;
    height: 30px;
    width: 30px;
    transform: rotate(-45deg);
}

<div class="triangle"></div>

Développer l'extrait

— Alan Dunning
source

1

C'est la réponse parfaite, elle doit vraiment être acceptée. Très simple et tout aussi efficace.

— Andrew Faulkner

@AndrewFaulkner Heureux que cela ait aidé.

— Alan Dunning

38

Chevrons / flèches réactifs

ils se redimensionnent automatiquement avec votre texte et sont colorés de la même couleur. Plug and play :)
jsBin Demo Playground

body{
  font-size: 25px; /* Change font and  see the magic! */
  color: #f07;     /* Change color and see the magic! */
} 

/* RESPONSIVE ARROWS */
[class^=arr-]{
  border:       solid currentColor;
  border-width: 0 .2em .2em 0;
  display:      inline-block;
  padding:      .20em;
}
.arr-right {transform:rotate(-45deg);  -webkit-transform:rotate(-45deg);}
.arr-left  {transform:rotate(135deg);  -webkit-transform:rotate(135deg);}
.arr-up    {transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.arr-down  {transform:rotate(45deg);   -webkit-transform:rotate(45deg);}

This is <i class="arr-right"></i> .arr-right<br>
This is <i class="arr-left"></i> .arr-left<br>
This is <i class="arr-up"></i> .arr-up<br>
This is <i class="arr-down"></i> .arr-down

Développer l'extrait

— Roko C. Buljan
source

1

Wow, ce symbole s'appelle en fait "coin supérieur droit" ! Agréable. :) Moins de contrôle sur la largeur qu'avec une bordure, mais toujours +1 pour montrer la possibilité de polices. Pour d'autres symboles, cela pourrait être mieux qu'une astuce de forme CSS.

— GolezTrol

Notez que les icônes de police ne fonctionneront pas bien si l'utilisateur ne dispose pas de la police, vous devez donc vous assurer d'avoir des solutions de secours appropriées aux polices disponibles sur la plupart des systèmes. Vous pourriez aussi bien choisir de télécharger la police via CSS, mais c'est un gaspillage de bande passante de le faire pour quelques icônes. Si vous avez de nombreuses icônes, ou si vous souhaitez les avoir dans votre propre style, vous pouvez opter pour les ajouter toutes à votre propre police d'icônes et la charger via CSS. De cette façon, vous êtes (presque) certain d'avoir la bonne police disponible sans avoir à télécharger d'énormes polices pour une poignée de symboles.

— GolezTrol

De retour en HTML 4.0, un ensemble total a été adopté contenant 38887 caractères. puisque le v. 6.2.0 September 2012 1jeu de UTF-8caractères Unicode monte à 110182, et maintenant HTML5 et UTF-8 par défaut et semble que notre personnage a l'air bien: unicode.org/Public/UNIDATA/UnicodeData.txt

— Roko C. Buljan

Le fait que le personnage existe ne signifie pas qu'il peut être affiché. Vous aurez besoin de la police appropriée pour l'afficher. C'est la raison pour laquelle les caractères de la première version de votre réponse ont échoué: parce que la police par défaut de mon navigateur n'incluait pas ces caractères. Donc, pour utiliser un caractère comme celui-ci, vous devrez spécifier les polices à utiliser et vous devez fournir des solutions de secours appropriées aux autres polices si elles ne sont pas disponibles sur toutes les plates-formes. Par exemple, le \231dpersonnage peut être disponible ici, mais pas sur un Mac ou un appareil Android. La version HTML et le codage des réponses n'ont rien à voir avec cela.

— GolezTrol

Pouvez-vous le rendre plus mince? Au lieu d'être si gros? Changer le poids de la police ne fait rien.

— James111

14

Voici une approche différente:

1) Utilisez le caractère de multiplication: ××

2) Cachez-en la moitié avec overflow:hidden

3) Ajoutez ensuite un triangle comme pseudo élément pour la pointe.

L'avantage ici est qu'aucune transformation n'est nécessaire. (Cela fonctionnera dans IE8 +)

VIOLON

.arrow {
  position: relative;
}
.arrow:before {
  content: '×';
  display: inline-block;
  position: absolute;
  font-size: 240px;
  font-weight: bold;
  font-family: verdana;
  width: 103px;
  height: 151px;
  overflow: hidden;
  line-height: 117px;
}
.arrow:after {
  content: '';
  display: inline-block;
  position: absolute;
  left: 101px;
  top: 51px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 24px;
  border-color: transparent transparent transparent black;
}

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

Développer l'extrait

— Danield
source

2

Fonctionne dans Internet Explorer, Chrome et Firefox.

— Thomas

11

Utilisez juste avant et après les pseudo-éléments - CSS

*{box-sizing: border-box; padding: 0; margin: 0}
:root{background: white; transition: background .3s ease-in-out}
:root:hover{background: red }
div{
  margin: 20px auto;
  width: 150px;
  height: 150px;
  position:relative
}

div:before, div:after{
  content: '';
  position: absolute;
  width: 75px;
  height: 20px;
  background: black;
  left: 40px
}

div:before{
  top: 45px;
  transform: rotateZ(45deg)
}

div:after{
  bottom: 45px;
  transform: rotateZ(-45deg)
}

<div/>

Développer l'extrait

— Gildas.Tambo
source

8

Une autre approche utilisant des bordures et aucune propriété CSS3 :

div, div:after{
    border-width: 80px 0 80px 80px;
    border-color: transparent transparent transparent #000;
    border-style:solid;
    position:relative;
}
div:after{
    content:'';
    position:absolute;
    left:-115px; top:-80px;
    border-left-color:#fff;
}

<div></div>

Développer l'extrait

— web-tiki
source

4

>lui-même est une flèche très merveilleuse! Ajoutez simplement un div avec et stylisez-le.

div{
  font-size:50px;
}
div::before{
  content:">";
  font: 50px 'Consolas';
  font-weight:900;
}

<div class="arrowed">Hatz!</div>

Développer l'extrait

— nicael
source

2

C'est un symbole «supérieur à», pas une flèche.

— Mark Knol

@MarkKnol Quelle est la différence entre ceci et à quoi ressemble la flèche de tout le monde? Cela me semble être la meilleure solution à ce jour.

— dallin

2

Flèche gauche droite avec effet de survol en utilisant Roko C. Buljan box-shadow trick

.arr {
  display: inline-block;
  padding: 1.2em;
  box-shadow: 8px 8px 0 2px #777 inset;
}
.arr.left {
  transform: rotate(-45deg);
}
.arr.right {
  transform: rotate(135deg);
}
.arr:hover {
  box-shadow: 8px 8px 0 2px #000 inset
}

<div class="arr left"></div>
<div class="arr right"></div>

Développer l'extrait

— vinayakj
source

1

J'avais besoin de changer inputune flèche dans mon projet. Voici le travail final.

#in_submit {
  background-color: white;
  border-left: #B4C8E9;
  border-top: #B4C8E9;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  width: 15px;
  height: 15px;
  transform: rotate(-45deg);
  margin-top: 4px;
  margin-left: 4px;
  position: absolute;
  cursor: pointer;
}

<input id="in_submit" type="button" class="convert_btn">

Développer l'extrait

Ici Fiddle

— Mostafa
source

Code génial! Il n'utilise qu'un seul élément, ce qui est difficile à faire :)

— www139

0

.arrow {
  display : inline-block;
  font-size: 10px; /* adjust size */
  line-height: 1em; /* adjust vertical positioning */
  border: 3px solid #000000;
  border-left: transparent;
  border-bottom: transparent;
  width: 1em; /* use font-size to change overall size */
  height: 1em; /* use font-size to change overall size */
}

.arrow:before {
  content: "\00a0"; /* needed to hook line-height to "something" */
}

.arrow.left {
  margin-left: 0.5em;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.arrow.right {
  margin-right: 0.5em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.top {
  line-height: 0.5em; /* use this to adjust vertical positioning */
  margin-left: 0.5em;
  margin-right: 0.5em;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.arrow.bottom {
  line-height: 2em;
  /* use this to adjust vertical positioning */
  margin-left: 0.5em;
  margin-right: 0.5em;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

<div>
  here are some arrows
  <div class='arrow left'></div> space
  <div class='arrow right'></div> space
  <div class='arrow top'></div> space
  <div class='arrow bottom'></div> space with proper spacing?
</div>

Développer l'extrait

Similaire à Roko C, mais un peu plus de contrôle sur la taille et le placement.

— bob
source