41Mag - Comment créer des lignes diagonales en CSS3

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 :

Cadre en diagonal

Et sans image en arrière-plan !

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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 :

1
2
3
4
5
6
7
8
9
<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, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </section>
</article>

Cadre en diagonal

Et sans image en arrière-plan !

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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 :

1
2
3
4
5
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 …

1
2
3
4
5
6
7
8
h3 {
  padding: 10px;
  color: #fff;
  font-weight: bold;
  display: block;
  border-right: 30px solid red;
  border-bottom: 30px solid #4c4c4c;
}

Ce qui nous donnera :

Cadre en diagonal

Et sans image en arrière-plan !

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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 :

1
2
3
4
5
6
7
8
9
10
11
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;
}

Ce qui nous donnera :

Cadre en diagonal

Et sans image en arrière-plan !

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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 …

1
2
3
4
5
6
7
8
9
10
11
12
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;.

1
2
3
4
5
6
7
8
9
10
11
12
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;
}

Ce qui nous donnera :

Cadre en diagonal

Et sans image en arrière-plan !

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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.

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

Ce qui nous donnera :

Cadre en diagonal

Et sans image en arrière-plan !

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voila, ce n’était pas très dur …

Article du même thême : ..

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.