Pivoter un container

Illustration représentant un carré subissant une rotation
⏱ 3 minutes | 📚 Moyen

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);
}
Ce texte représente le contenu de votre section

Problème
La section ne s’arrête pas aux bords, il faut l’agrandir avec une marge négative grâce à margin.
Les éléments enfants ont aussi subit la rotation, il suffit d’effectuer une rotation dans le sens inverse avec transform: rotate.

Ce texte représente le contenu de votre section

Problème
La section dépasse de son cadre, il faut appliquer un overflow: hidden à l’élément parent (wrapper).
Les éléments à proximité des extrémités dépassent, il faut ajouter une marge interne avec padding.

Ce texte représente le contenu de votre section

Terminé
Bien joué 🙂 Votre container est pivoté.

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.

Ce texte représente le contenu de votre section

Problème
Le sélecteur ::after se positionne après le contenu et on peut régler cela en spécifiant des position.
La bordure pourrait dépasser de son cadre, il faut appliquer un overflow: hidden à l’élément supérieur.

Ce texte représente le contenu de votre section

Terminé
Bien joué 🙂 Votre container est pivoté.

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:

Ce texte représente le contenu de votre section

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 🙂




Lenny Obez

Passionné des nouvelles technologies, j'ai suivi des cours en ligne afin de pouvoir concevoir des sites web grâce aux langages HTML5, CSS3, PHP et SQL. Grâce à ce centre d'intérêt, j'ai de bonnes connaissances dans la télécommunication (TEL + NET + TV). Je lance mon blog le 14 février 2016 et publie mon premier article le 22 février de la même année.

Pas de commentaire


Soyez le premier à commenter :)



Cet article vous a plu ? Avez-vous des questions ? N'hésitez pas à commenter, ça fait plaisir !

75266dab36bdddc1871c43928a673e6cAAAAAAA
%d blogueurs aiment cette page :