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

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

Dans cette question, l'utilisateur vise à créer un arrière-plan incliné en utilisant CSS. Ils fournissent une image montrant la mise en page souhaitée et décrivent le code qu'ils ont essayé, qui n'a pas produit le résultat escompté.

Pour obtenir l'arrière-plan incliné souhaité, nous pouvons utiliser un pseudo-élément avec transformation inclinée. Cette technique offre un contrôle précis sur l'angle et la position de l'élément incliné.

Le code suivant montre comment créer un arrière-plan incliné :

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, nous introduisons un pseudo- élément, ":before", qui servira d'arrière-plan incliné. Nous positionnons ce pseudo-élément absolument au sein du corps pour contrôler son placement. La propriété "transform: skew(-30deg)" incline le pseudo-élément, créant un effet incliné. La propriété "transform-origin: top" spécifie que l'inclinaison doit provenir du haut du pseudo-élément, garantissant que l'arrière-plan s'incline sur tout l'élément.

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!