Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Boutons Suivant Précédent

Créez des flèches en utilisant les bordures.

Création: juillet 2010Modifié:

PREV

NEXT

Contenu
Full CSS Pas de JavaScript Pas d’images
Navigateurs
Firefox Safari Chrome Opera
Partagez
Facebook Twitter

Votez

50 votes3.92

Utilisation des pseudo-éléments ::before et ::after et des bordures afin de créer des flèches sans utiliser d’images.

Dans 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 ...)

Envie d'une nouvelle démo?

Un p'tit mot...

#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


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)