Souscrire
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
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