Pivoter un container

Il est de plus en plus courant d’apercevoir des sections sur des sites One Page ayant subit un pivotement – ou rotation – à des fins graphiques. Que vous soyez intégrateur aguerri, amateur du dimanche ou simplement curieux, je vais essayer de vous expliquer de la manière la plus compréhensible possible les différentes façons – et leurs avantages/inconvénients – afin d’y arriver.

One Page, comme son nom l’indique, est un type de design où un site affiche la majorité de ses informations sur une seule page.

Pré-requis

Pour commencer, nous allons créer le container de notre choix, j’ai choisi section – vous pouvez utiliser d’autres containers tel que div, article, … selon vos besoins – et je vais le rendre visible avec le code CSS suivant:

section {
    background-color: #F50057;
    color: white;
    height: 96px;
    margin: 5vh 0;
}

Avec une transformation 2D

Cette méthode s’effectue grâce à une transformation 2D avec la propriété transform: rotate que nous allons intégré au container que nous avons précédemment créé:

section {
    ...
    transform: rotate(-5deg);
}

Il est maintenant évident d’utiliser une formule afin d’éviter que le contenu n’entre dans une des deux zones mortes, représentées sur l’image ci-dessous par les triangles ABE et CDF :

Pour y arriver, nous réalisons le calcul suivant : 0.872664 * tangente géodésique (= facteur de rotation)

Le premier paramètre (0.872664) provient de cette formule : (π / 360) * 100 = 0.872664.

Voilà qui est fait, nous devrions obtenir le code suivant bien que vous devriez avoir des différences selon la couleur, la hauteur et le facteur de rotation sélectionné:

.wrapper { overflow: hidden }

section {
    background-color: #F50057;
    color: white;
    height: 15vh;
    margin: 5vh -1vw;
    padding: 4.36% 0; /* car 0.872664* 5 = 4.36332 */
    transform: rotate(-5deg);
}

section p { transform: rotate(5deg) }

Étant donné que les propriétés background-color, color et height sont uniquement là afin d’afficher clairement notre container, il n’est pas obligatoire de les intégrer, c’est pour cela que j’ai mis en gras les propriétés obligatoires. Cette solution est la plus simple des 3.

Avec des bordures

Avec cette alternative, nous allons reprendre le code du Pré-requis pour y ajouter les sélecteurs ::before et ::after afin de simuler une rotation grâce à des bordures disposées en oblique:

section::before, section::after {
    display: inline-block;
    content: '';
}

section::before {
    border-bottom: 24px solid #F50057;
    border-left: 500px solid white;
}

section::after {
    border-right: 500px solid white;
    border-top: 24px solid #F50057;
}

Les bordures supérieure et inférieure représentent le facteur de rotation, vous devez leur appliquer la-même couleur que celle de votre container alors que les bordures de côtés doivent avoir la-même couleur que le container au-dessus/en-dessous de notre container, par la-même occasion, elles doivent être égale – si largeur fixe – ou supérieure – si largeur dynamique – à la largeur du container.

Au final, nous devrions obtenir ceci:

.wrapper { overflow: hidden }

section {
    background-color: #F50057;
    color: white;
    height: 25vh;
    margin: 5vh 0;
    position: relative;
}

section::before, section::after {
    display: inline-block;
    content: '';
}

section::before {
    border-bottom: 24px solid #F50057;
    border-left: 500px solid white;
}

section::after {
    border-right: 500px solid white;
    border-top: 24px solid #F50057;
    bottom: 0;
    position: absolute;
}

L’avantage avec cette méthode, c’est que nous ne devons pas commencer à calculer les marges internes du container ni appliquer la propriété transform sur le contenu ce qui aurait eu comme effet de flouter les éventuelles images sur les anciens navigateurs. En plus, vous avez plus de liberté grâce aux deux points d’accroches, vous pouvez par exemple créer un triangle:

Il y a un inconvénient, c’est que sans code JavaScript, il n’y a pas de possibilités de rendre cette manipulation responsive.

Avec des images

La dernière solution est identique à la deuxième, à la place d’utiliser la propriété border, il faudra utiliser la propriété background-image avec une image en « pente ». Il faudra cependant envisager l’utilisation d’une image vectorielle afin d’éviter tout crénelage.

Si vous avez aimé cet article, je vous invite à commenter et à le partager 🙂