Médiaforma

All posts tagged border-bottom

Cette rubrique s’inspire de la précédente. Elle va vous montrer comment tracer des triangles en affectant des bordures épaisses à une balise <div> vide de tout contenu et en masquant certaines de ces bordures. Dans un premier temps, nous allons tracer un carré de 100 pixels de côté et définir ses bordures pour obtenir le résultat suivant :

triangles css3

Voici le code utilisé :

triangles css3

Le code HTML définit quatre balises <div> d’identifiants tr-bas, tr-haut, tr-gauche et tr-droite.

Examinons le code CSS.

La largeur de la balise d’identifiant #tr-bas est fixée à 0. Ainsi, le <div> corespondant aura une largeur fixe, indépendante de la taille de la fenêtre du navigateur.

En affectant la valeur 100px à la propriété border-top et la valeur 50px aux propriétés border-left et border-right, la balise <div> a une dimension de 100 pixels sur 100 pixels, et la bordure supérieure est deux fois plus grande que la bordure gauche ou que la bordure droite.

Pour transformer ce carré en une flèche orientée vers le bas, il suffit d’utiliser une couleur transparente pour les bordures gauche et droite, en affectant la valeur transparent aux propriétés border-left et border-right :

triangles css3

Les bordures gauche et droite disparaissent et seul un triangle orienté vers le bas est affiché :

triangles css3

En utilisant une technique similaire, il est facile de définir des triangles orientés vers le haut, vers la gauche ou vers la droite :

triangles css3

Voici le résultat :

triangles css3


Cette rubrique va vous montrer comment créer des carrés comportant quatre couleurs en utilisant des bordures CSS épaisses. Pour cela, nous allons utiliser la propriété CSS border, ou plus précisément les propriétés CSS border-top, border-bottom, border-left et border-right, qui définissent les quatre côtés de la bordure. Voici ce que nous cherchons à obtenir :

bordures css3

Et voici le code permettant d’arriver à ce résultat :

bordures css3

La partie HTML est comme toujours élémentaire. Elle contient une balise <div> d’identifiant #bordure-epaisse. Le texte Une bordure épaisse est affiché à l’intérieur de la balise.

Examinons le code CSS.

Quatre bordures de couleurs différentes et épaisses de 50 pixels sont définies à l’aide des propriétés CSS border-top, border-bottom, border-left et border-right.

L’effet produit est intéressant, mais lorsque l’on redimensionne la fenêtre du navigateur, la largeur de la balise <div> est ajustée en conséquence. Pour obtenir une largeur fixe, égale à la somme des bordures gauche et droite (soit 100 pixels), il suffit de fixer la largeur de la balise <div> à 0 pixel avec la propriété width et de supprimer le texte qui se trouve à l’intérieur de la balise :

bordures css3

On obtient maintenant un carré de 100 pixels de côté. Sa taille reste fixe lorsque l’on redimensionne la fenêtre du navigateur.