Comment créer des lignes diagonales en CSS3

Dans ce tutoriel, nous allons vous expliquer pas à pas comment créer des lignes diagonales en CSS3.
Afin de facilité la compréhension, nous utiliseront un même exemple tout au long de ce tutoriel. Nous allons créer un cadre avec un contenu (texte, paragraphe, liste, formulaire …) et un titre. C’est justement ce titre qui bénéficiera d’une ligne en diagonales pour le rendre plus jolie. Et le tout en CSS3, sans rajouter d’image d’arrière-plan !
Comme pour le résultat final ci-dessous :

La technique employée est assez simple, mais, néanmoins, peu de gens la connaissent. Voici comment procéder :

La partie HTML du cadre
Pour commencer, nous allons créer un cadre en HTML5 :

 <article>
 <h3>Cadre en diagonal</h3>
 <section> <h4> 
 Et sans image en arrière-plan !</h4>
 <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. 
 Duis aute irure dolor in reprehenderit pariatur.
 Excepteur sint occaecat cupidatat non proident,
 </p>
 </section>
 </article> 

L’encadrement du titre avec une ligne diagonale en CSS3
Pour la mise en page, nous allons régler la police, la taille et les marges de notre cadre :

 article {
 font: 13px Arial; 
 width: 400px;
 margin: 15px auto;
 } 

Occupons nous maintenant de la balise <h3>, celle qui représente notre titre. Nous allons lui appliquer une nouvelle couleur, la mettre en gras, ajouter une bordure …

 h3 {
 padding: 10px; 
color: #fff; 
font-weight: bold; 
display: block; 
border-right: 30px solid red; 
border-bottom: 30px solid #4c4c4c;
 } 

Ajuster la position du titre

Remarquez que lorsque vous définissez de grande largeur de bordures, les deux se croisent, et cela crée une ligne diagonale.

Il nous faudra donc la hauteur à zéro et régler la hauteur de ligne pour ajuster notre titre :

 h3 {
 padding: 10px; 
color: #fff; 
font-weight: bold; 
display: block; 
border-right: 30px solid red; 
border-bottom: 30px solid #4c4c4c;
 height:0; 
line-height:50; 
} 

Ajuster la taille et l’emplacement de la bordure du titre
Nous y sommes presque ! Mais, nous n’avons plus besoin de cette bordure rouge sur la droite. Nous utilisons le mot-clé transparente pour la faire disparaitre …

 h3 {
 padding: 10px; 
color: #fff; 
font-weight: bold;
 display: block; 
border-right: 30px solid transparent; 
border-bottom: 30px solid #4c4c4c;
 height:0;
 line-height:50;
 } 

Pour ajuster sa taille, nous allons utiliser l’élément display: inline-block;

 h3 {
 padding: 10px; 
color: #fff;
 font-weight: bold; 
display: inline-block; 
border-right: 30px solid transparent;
 border-bottom: 30px solid #4c4c4c; 
height:0; 
line-height:50; 
} 

Le cadre du contenu
Il ne nous reste plus qu’a remonter le cadre, lui ajouter une bordure et une marge intérieur pour décoller les textes du bord.

 section { 
 border: 2px solid #4c4c4c;
 border-top: 3px solid #4c4c4c; 
 padding: 20px;
 } 

Ce qui nous donnera :