Comment créer une page avec des diagonales comme séparateur ?
Voici quelques exemples de diagonales, faites de différentes manières. Il est en effet possible de créer ce genre de design à l’aide d’images ou de svg qu’on insère au début et à la fin de chaque bloc. On peut aussi le faire avec des div coupés en triangles, placés en dur ou en pseudo élément. Ou alors avec la propriété css linear gradient pour créer des transitions de couleurs obliques. Enfin, on peut aussi utiliser les propriétés clip-path ou skew. Bref, on peut le faire de différentes manières.
Créer des diagonales à l’aide de blocs svg
Pour générer du svg sans se prendre la tête, voici un outil tout simplement génial :
Jouez avec l’outil jusqu’à trouver la forme souhaitée. Pour mon exemple de diagonale je récupère le code suivant :
Je place donc un bloc svg au début et à la fin de chaque section. Pour le bloc inférieur, j’inverse les coordonnées : de d= »M0,224L1440,0L1440,320L0,320Z » je le passe à « d= »M0,224L1440,0L1440,0L0,0Z ».
Afin de coller chaque bloc et éviter les marges, j’entoure chaque section d’un conteneur auquel j’applique une margin négative.
See the Pen
Diagonal Divs With Svg by yuyazz (@yuyazz)
on CodePen.
Dans les exemples qui vont suivre, on ne va se servir que de code, et on peut voir qu’il existe plusieurs possibilités.
Créer des diagonales à l’aide de linear gradient
Dans l’exemple ci-dessous, on crée successivement trois sections. Dans chaque section, on crée un conteneur qui va s’adapter à la hauteur du contenu. A la fin de chaque section, on crée un div supplémentaire sur laquelle on applique un linear gradient au background.
Dans ce dégradé, la première couleur doit correspondre à la background-color de la div supérieure, et la seconde couleur à celle de la div inférieure. On applique une séparation à 50/50 avec un petit hack : calc(50%+2px) ce qui va lisser notre diagonale proprement. Vous pouvez tester en mettant #212531 50% au lieu de #212531 calc(50% + 2px), vous verrez que la diagonale devient pixelisée. La hauteur de la div est limitée à 95px, j’ai trouvé que c’était le meilleur compromis. Au delà, la diagonale ne va pas arriver au bout de la div inférieure et on n’aura pas une césure nette entre les sections.
See the Pen
Diagonal Divs with linear gradient bloc add-on by yuyazz (@yuyazz)
on CodePen.
Créer des diagonales à l’aide de pseudo-éléments et de la fonction skew
Ici, même principe pour le html, sauf qu’on retire la div supplémentaire entre chaque section. A la place, on va utiliser un pseudo élément ::before, et ::after pour chacune d’entre elle. Ces div seront placées en position absolute en top:0 et bottom:0. On les place derrière la section, à l’aide de la propriété z-index qu’on fixe à -10. On leur applique la même couleur de fond que le div principale et on les fait tourner de 3 deg grâce à la fonction skew. Ainsi on obtient des diagonales en haut et en bas de chaque bloc. Sans marges entre les sections, celles-ci se collent les unes aux autres. Il ne faut pas appliquer de height aux sections, sinon le contenu va déborder sur la div du dessous.
See the Pen
Diagonal divs with pseudo elements by yuyazz (@yuyazz)
on CodePen.
Créer des diagonales à l’aide de la propriété linear gradient sur la couleur de fond
Enfin, une autre version dans laquelle on applique simplement un dégradé au background de chaque section. Cette solution, bien que pratique et rapide pour mettre en place un design moderne et original, ne conviendra pas pour créer de vraies séparations entre blocs de contenu. Comme le dégradé fait partie du bloc, en cas de contenu trop fourni, celui-ci risquer alors de déborder sur la diagonale.
See the Pen
Diagonal Divs using Linear Background by yuyazz (@yuyazz)
on CodePen.
Créer des diagonales à l’aide de triangles
Dans cet exemple, on va également rajouter des div au dessus et au dessous de chaque section. Ces div sont des triangles avec une bordure inférieure de la même couleur que la section suivante, et une bordure supérieure transparente.
See the Pen
Diagonal Divs : triangles by yuyazz (@yuyazz)
on CodePen.
Créer des diagonales avec la propriété clip-path
Encore un dernier exemple, cette fois avec la propriété clip path. On crée ici une figure oblique grâce au clip-path et on l’inverse avec la propriété scaleY(-1). Selon le site developer.mozilla.org
« scaleX(-1) définit une symétrie axiale par rapport à un axe vertical passant par l’origine du repère (définie grâce à la propriété transform-origin). »
See the Pen
Diagonal divs : clip path by yuyazz (@yuyazz)
on CodePen.