Wie erstelle ich mit CSS einen schrägen Hintergrund?

Schräge Hintergründe in CSS erstellen

Im Bereich Webdesign kann die Erstellung optisch ansprechender und dynamischer Layouts oft die Einbeziehung ungewöhnlicher Formen und Verläufe erfordern . Eine dieser Herausforderungen ist die Erstellung eines schrägen oder diagonalen Hintergrunds, der jeder Website ein unverwechselbares Flair verleihen kann. Obwohl es komplex erscheinen mag, ist es überraschend einfach, diesen Effekt mit CSS zu erzielen.

Diese ausführliche Anleitung führt Sie durch die Schritte zum Erstellen eines schrägen Hintergrunds mit CSS. Das vom Benutzer bereitgestellte Beispiel zeigt eine diagonale Linie, die den Hintergrund in zwei kontrastierende Farben unterteilt. Um diesen Effekt zu reproduzieren, verwenden wir Pseudoelemente und wenden eine Schrägtransformation an.

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:

• Das Body-Element legt die Höhe der Seite auf 100 fest % der Höhe des Ansichtsfensters, eliminiert Ränder und wendet einen gelben Hintergrund an.
• Das Pseudoelement body:before erstellt ein neues Element vor dem ersten untergeordneten Element des Körper. Ihm wird ein leerer Inhaltswert (Inhalt: „“) zugewiesen, was ihn zu einem leeren Container macht.
• Wir positionieren das Pseudoelement absolut (Position: absolut), decken die Höhe und Breite der Seite ab und richten es gleichzeitig an der Seite aus linker Rand (links: 0; Breite: 300px;).
• Die Hintergrundfarbe (Hintergrund: #000) wird auf Schwarz gesetzt, wodurch die Schräge entsteht Abschnitt.
• Die Eigenschaft „transform: skew(-30deg)“ neigt das Element horizontal um -30 Grad und erzeugt so die diagonale Neigung.
• Die Eigenschaft „transform-origin:top“ gibt den Punkt an, von dem aus die Neigung erfolgt Transformation entsteht. In diesem Fall ist es die Oberseite des Elements.

Durch Anpassen des Winkels der Schrägtransformation und der Position des Pseudoelements können Sie die Form und Größe des schrägen Hintergrunds an Ihre Bedürfnisse anpassen Designanforderungen.

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!