Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mit CSS einen schrägen Hintergrund erstellen?

Wie kann ich mit CSS einen schrägen Hintergrund erstellen?

DDD
Freigeben: 2024-11-06 19:21:02
Original
919 Leute haben es durchsucht

How Can I Create a Slanted Background Using CSS?

Schrägen Hintergrund mit CSS erstellen

Problem:

Sie möchten einen schrägen Hintergrund erstellen Hintergrund, wie im bereitgestellten Bild dargestellt. Ihre aktuelle CSS-Implementierung erzielt nicht den gewünschten Effekt.

Lösung:

Um einen schrägen Hintergrund zu erzielen, können Sie ein Pseudoelement mit einer Schrägtransformation verwenden:

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;
}
Nach dem Login kopieren

Diese Technik erzeugt ein schräges Element, das in der oberen linken Ecke des Ansichtsfensters positioniert ist. Durch die Steuerung der Breite des Elements und des Neigungswinkels können Sie die Neigung entsprechend Ihren Anforderungen anpassen.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage