Comment créer un arrière-plan incliné en utilisant CSS ?

Création d'arrière-plans inclinés en CSS

Dans le domaine de la conception Web, la création de mises en page visuellement attrayantes et dynamiques peut souvent impliquer l'incorporation de formes et de dégradés inhabituels. . L’un de ces défis est la création d’un arrière-plan incliné ou diagonal, qui peut ajouter une touche distinctive à n’importe quel site Web. Bien que cela puisse paraître complexe, obtenir cet effet avec CSS est étonnamment simple.

Ce guide détaillé vous guidera à travers les étapes pour créer un arrière-plan incliné à l'aide de CSS. L'exemple fourni par l'utilisateur montre une ligne diagonale divisant le fond en deux couleurs contrastées. Pour reproduire cet effet, nous utiliserons des pseudo-éléments et appliquerons une transformation d'inclinaison.

body {
  height: 100vh;
  margin: 0;
  background: yellow;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: #000;
  transform: skew(-30deg);
  transform-origin:top;
}

Dans ce code :

• L'élément body définit la hauteur de la page à 100 % de la hauteur de la fenêtre d'affichage, élimine les marges et applique un fond jaune.
• Le pseudo-élément body:before crée un nouvel élément avant le premier enfant du corps. On lui attribue une valeur de contenu vide (content : ""), ce qui en fait un conteneur vide.
• Nous positionnons le pseudo élément de manière absolue (position : absolue), couvrant la hauteur et la largeur de la page tout en l'alignant sur le bord gauche (gauche : 0 ; largeur : 300 px ;).
• La couleur d'arrière-plan (arrière-plan : #000) est définie sur noir, créant la section inclinée.
• La transformation : skew(- 30deg) incline l'élément horizontalement de -30 degrés, créant l'inclinaison diagonale.
• La transformation-origin:top spécifie le point d'où provient la transformation d'inclinaison. Dans ce cas, il s'agit du haut de l'élément.

En ajustant l'angle de la transformation d'inclinaison et la position du pseudo-élément, vous pouvez personnaliser la forme et la taille de l'arrière-plan incliné en fonction de votre besoins de conception.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!