Médiaforma

Jouez avec les bordures

Print Friendly

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.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply