Comment créer un arrière-plan incliné à l'aide de pseudo-éléments CSS ?

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

La création d'un arrière-plan incliné peut être réalisée à l'aide d'une variété d'options de style CSS. Une approche efficace consiste à utiliser des pseudo-éléments ainsi que des transformations d'inclinaison.

Implémentation avec un pseudo-élément CSS

Le code CSS suivant montre comment créer un arrière-plan incliné à l'aide d'un pseudo-élément. :

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;
}

Ce code crée un 斜斜背景 situé sur le côté gauche du conteneur. La propriété transform: skew(-30deg) incline le pseudo-élément, ce qui donne l'inclinaison souhaitée.

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!