Maison > interface Web > tutoriel CSS > Comment puis-je créer un arrière-plan incliné en utilisant CSS ?

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

DDD
Libérer: 2024-11-06 19:21:02
original
919 Les gens l'ont consulté

How Can I Create a Slanted Background Using CSS?

Créer un arrière-plan incliné avec CSS

Problème :

Vous souhaitez créer un arrière-plan incliné arrière-plan, comme illustré dans l’image fournie. Votre implémentation CSS actuelle n'obtient pas l'effet souhaité.

Solution :

Pour obtenir un arrière-plan incliné, vous pouvez utiliser un pseudo-élément avec une transformation inclinée :

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;
}
Copier après la connexion

Cette technique crée un élément incliné positionné dans le coin supérieur gauche de la fenêtre. En contrôlant la largeur de l'élément et l'angle d'inclinaison, vous pouvez personnaliser l'inclinaison en fonction de vos besoins.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal