web-dev-qa-db-fra.com

Comment puis-je créer une flèche en utilisant uniquement CSS?

J'ai vu l'exemple suivant:

.arrow {
   height: 0;
   width: 0;
   border: 4px solid transparent;
}
.arrow.up {
   border-bottom-color: #000;
}
.arrow.down {
   border-top-color: #000;
}

http://jsfiddle.net/FrsGR/

Cependant, je ne peux pas comprendre comment cela crée des flèches. Quelqu'un peut-il m'expliquer cela?

cssgeometrycss-shapes
33
user1943020

Je ne connaissais pas cette astuce avant, mais je pense que je la comprends. La bordure inférieure n'est pas carrée, elle est biseautée sur les côtés. Une bordure gauche serait biseautée en haut et en bas. C'est ainsi que les bordures de différentes couleurs se rencontrent proprement. Étant donné que l'élément flèche a 0 hauteur et largeur, le segment de bordure est aussi large en bas que vous spécifiez dans la règle de bordure, mais se réduit à une largeur de 0 px (la taille du conteneur).

Vous pouvez jouer avec l'effet en définissant différentes épaisseurs de bordure ou en changeant le "côté" de la règle de bordure. La "flèche" pointe toujours à l'opposé de la direction définie dans la règle. La bordure inférieure "pointe" vers le haut; une bordure droite "pointe" vers la gauche.

Voici un schéma rapide:

enter image description here

À gauche est l'astuce de la flèche. La droite est une bordure plus typique où le conteneur a certaines dimensions.

29
Surreal Dreams

Prenez une boîte. Disons que c'est 5 pixels de haut et 5 pixels de large. Maintenant, disons qu'il a une bordure 4px. Voici ce que vous devriez envisager: http://jsfiddle.net/FrsGR/19 .

.arrow { // box
   height: 5px;
   width: 5px;
   border: 4px solid blue;
}

Imaginez maintenant que la boîte n'a pas de largeur ou de hauteur, il ne vous reste donc que les bordures: http://jsfiddle.net/FrsGR/885/ .

.arrow { // box with no width/height
   height: 0;
   width: 0;
   border: 4px solid blue;
}

Ils se chevauchent maintenant, et c'est là que la magie opère avec la création de flèches. La ligne de chevauchement est tracée en diagonale de chaque coin vers le centre. Ainsi, le résultat final est des triangles transparents en haut, à gauche et à droite, avec un triangle noir en bas. J'espère que cela a aidé!

Grande référence: Comment fonctionnent les triangles CSS?

4
Anthony

CSS crée une bordure autour d'un point (sans largeur/hauteur mais avec des coordonnées x, y) avec une dimension de 4 pixels comme spécifié dans .arrow. C'est comme créer un cercle avec un rayon de 4px, sauf qu'en raison de la nature des bordures de CSS, le "cercle" est en fait un carré.

Vous pouvez voir les quatre quandrants du carré de rayon 4px de cette façon:

.arrow.up {
    border-top-color:blue;
    border-right-color:green;
    border-left-color:red;
   border-bottom-color: #000;
}

Voici un exemple de zoom avant utilisant une taille de 40 pixels au lieu de 4 pixels:

http://jsfiddle.net/dqB32/1/

0
DrewP84