Bordure diagonale en CSS et sans image

La propriété border CSS n’a pas encore atteint ses limites .Nous allons encore les exploiter dans notre article.

Un élément en block a la forme d’un rectangle et ses bords lorsqu’ils sont tracés se rejoignent sur une intersection oblique. En jouant sur la taille, l’épaisseur et la couleur des bordures, d’innombrables effets peuvent en résulter.

Par avoir un effet oblique à 45 degrés, il suffit d’égaliser l’épaisseur de bordures horizontales et verticales et cela à appliquer sur n’importe quel élément de type block (ou inline avec la propriété display :block )

Mise en œuvre

On va prendre un div de 180px de large, de 70px de haut, enveloppé d’une bordure épaisse.

Comme sur les padding / margin il est tout à fait possible de définir la taille et ou la couleur de la bordure suivant l’ordre haut, la droite, le bas et la gauche.

Voici le code css :

Voici le résultat :

Mais vous vous demander, comment c’est possible le rendu diagonale sur les cotés, une petite explication s’impose :
Pour avoir un bon rendu, le navigateur doit interpréter le Css (ou feuilles de style en cascade), c’est pour cela que le navigateur comprend que chaque bordure a une couleur différente et aussi il va dans chaque zone de « conflit » (les coins) faire fifty-fifty, en créant la diagonale.

Pour voir l’étendu de la technique, imaginons qu’on ne veut ni bordure haute, ni gauche. Pour cela il suffit de mettre border-width : 0px 30px 30px 0px.

Pour aller encore plus loin, combiner avec l’utilisation des pseudo-éléments ” :before ” ou ” :after ” , on peut réaliser un effet de pliage en CSS3.
Nous n’allons pas aborder le sujet mais cliquez ici un projet de Ze Pliage s’étalant sur le sujet si ça vous intéresse

Une réponse à “Bordure diagonale en CSS et sans image”

  1. marco

    les bordures diagonales avec fond transparent me paraissent impossible dans la situation actuelle du CSS3

    Répondre

Répondre