Blog iamvdo.meDans cet exemple, on utilise les pseudo-éléments ::before et ::after afin de créer les triangles. Pour cela, un nouvel élément est ajouté, lequel reçoit des bordures énormes. Cela provoque l’affichage de triangle. Exemple de code CSS pour le paragraphe PREV :
p.prev::before {
content:"";
position:absolute;left:-25px;top:0;
/* taille */
height:0;width:0;
/* les bordures */
border-right:36px solid #AAAAAA;
border-bottom:18px solid transparent;
border-top:18px solid transparent;
}Il suffit ensuite de faire de même pour le paragraphe NEXT avec la pseudo-élément ::after.
La syntaxe CSS3 ::before et ::after (double deux points) permet de différencier les pseudo-éléments des pseudos-classes, lesquelles n’utilisent que le double point. (:hover, :active, :focus ...)
#1par MagicDemon, le 28 août 2011
Quelques information supplémentaires ne seraient pas de refus, parce que là je n’ai absolument pas compris comment tu as créé tes triangles :O
#2par YoPP, le 23 décembre 2011
Très pratique, mais faut reconnaître que je ne comprends pas du tout pourquoi ça donne des flèches -_-
#3par Kiwoa, le 29 mars 2012
Il le dit, ici : on utilise les pseudo-éléments ::before et ::after afin de créer les triangles. Pour cela, un nouvel élément est ajouté, lequel reçoit des bordures énormes. Cela provoque l’affichage de triangle.
En somme les pseudo élément, et ajoutez y une bordure de 36px contrairement aux autre bordure de 18px et voilà le résultat
#4par Ecto, le 19 juin 2012
C’est donc un bug ou c’est seulement comme sa, qu’un pseudo élement + bordure énorme = triangle ?
#5par css3create, le 19 juin 2012
@Ecto : Non, ce n’est pas un bug, c’est le modèle de rendu des bordures qui est comme ça. Essaie ce bout de code pour comprendre :
div{width: 100px; height: 100px;
border:30px solid red;
border-left-color: green;
border-right-color: green;
}
Et regarde la façon dont le rouge et le vert s’arrete dans un angle.
#6par Auronake, le 22 juin 2012
Tout d’abord, merci pour ton site. Dans l’ensemble, très beau et les tutoriels sont faciles d’accès.
Petit bémol sur celui-ci : très pauvre en explication et sur le pourquoi du comment ! Ensuite, en l’appliquant en test, je n’obtiens pas de flèches mais des trapèzes. Est-ce du à chrome, pourtant en dernière version ?
#7par Lili-Sam, le 1er juillet 2012
Bonjour !
Pourquoi est-on obligé d’utiliser une position absolue ? J’aimerais placer ma flèche dans le flux mais dès que l’on modifie position:absolute, non seulement elle ne se positionne pas du tout où je voudrais, mais en plus elle est tronqué (et pas de la même taille qu’en absolue alors que je n’ai changé aucune autre valeur). J’ai beau chercher et bidouiller, je n’arrive pas à résoudre ou seulement comprendre ce problème. Pouvez-vous m’éclairer ?
#8par zouille, le 22 septembre 2012
Bonjour,
et merci pour ce site super bien ! j’apprends grâce à lui ;)
pour ce tuto, il est vrai que c’est pas bien expliqué
mais en cherchant bien on comprends
si le pique de la flêche va vers le haut, il faut mettre un border-bottom (le pique part du bottom vers le haut) à 36px, un left et un right en transparent
si elle va vers le bas, il faut mettre un border-top à 36px (le pique part du top vers le bas), un left et un right en transparent
il faut aussi ajuster le width et le height de la div
voilà !
#9par Sera, le 3 octobre 2012
Dommage que tu n’ai pas réaliser un petit tuto avec ce qu’il faut ajouter sa éviterai de chercher 1h dans le code source
#10par Notalone, le 1er novembre 2012
Super article, je tiens à te remercier pour ton site qui est génial ;) site de qualité il va être mon ami pendant un petit moment :D
Et merci pour ton explication des bordures dans un de tes commentaires, n’ayant jamais utilisé de grosses bordures, je ne savais pas qu’elles fonctionnaient ainsi, comme quoi on en apprend tout les jours ;p