Wie erstelle ich in CSS einen zweifarbigen Hintergrund, der durch eine diagonale Linie geteilt wird?

Erstellen eines zweifarbigen Hintergrunds, der durch eine diagonale Linie in CSS geteilt wird

Teilen eines Hintergrunds in zwei verschiedene Farben oder Texturen mit einer diagonalen Linie ist ein optisch auffälliger Effekt. Dies kann durch CSS erreicht werden, wie im folgenden Beispiel gezeigt.

Um einen diagonal geteilten Hintergrund zu erstellen, befolgen Sie diese Schritte:

1. Erstellen Sie zwei separate Divs, um die beiden Seiten darzustellen der Hintergrund. Weisen Sie ihnen verschiedene Klassen zu, z. B. „links“ und „rechts“.
2. Wenden Sie auf jedes Div einfarbige oder strukturierte Hintergründe an, indem Sie die Eigenschaften „Hintergrundfarbe“ oder „Hintergrundbild“ verwenden.
3. Positionieren Sie die Divs nebeneinander mit float oder display: inline-block.
4. Wenden Sie mit der Eigenschaft „Hintergrundbild“ einen linearen Farbverlauf auf den Hintergrund an. Verwenden Sie einen harten Übergang, um eine scharfe diagonale Linie zwischen den Farben oder Texturen zu erstellen.

Hier ist ein Beispiel-Codeausschnitt:

<code class="css">.diagonal-split-background {
  width: 50%;
  height: 100vh;
  float: left;
}

.left {
  background-color: #013A6B;
}

.right {
  background-image: url("texture.jpg");
}

.diagonal-split-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}</code>

Dieser Code erstellt einen diagonal geteilten Hintergrund mit einem Vollton graue Farbe auf der linken Seite und eine Textur auf der rechten Seite. Die diagonale Linie wird mit einem linearen Farbverlauf von 30 Grad erstellt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS einen zweifarbigen Hintergrund, der durch eine diagonale Linie geteilt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!