Wie erstelle ich mit CSS einen schrägen Hintergrund?

Schräge Hintergründe mit CSS erstellen

In dieser Frage möchte der Benutzer einen schrägen Hintergrund mit CSS erstellen. Sie stellen ein Bild bereit, das das gewünschte Layout zeigt, und beschreiben den Code, den sie ausprobiert haben, der jedoch nicht zum gewünschten Ergebnis geführt hat.

Um den gewünschten schrägen Hintergrund zu erzielen, können wir ein Pseudoelement mit Schrägtransformation verwenden. Diese Technik bietet eine präzise Kontrolle über den Winkel und die Position des schrägen Elements.

Der folgende Code zeigt, wie man einen schrägen Hintergrund erstellt:

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

In diesem Code führen wir ein Pseudo- Element „:before“, das als geneigter Hintergrund fungiert. Wir positionieren dieses Pseudoelement absolut innerhalb des Körpers, um seine Platzierung zu kontrollieren. Die Eigenschaft „transform: skew(-30deg)“ verzerrt das Pseudoelement und erzeugt so einen schrägen Effekt. Die Eigenschaft „transform-origin: top“ gibt an, dass die Schräge von der Oberseite des Pseudoelements ausgehen soll, um sicherzustellen, dass der Hintergrund schräg über das gesamte Element verläuft.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen schrägen Hintergrund?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!