How to Create a Two-Tone Background Split by a Diagonal Line in CSS?

Creating a Two-Tone Background Split by a Diagonal Line in CSS

Splitting a background into two distinct colors or textures with a diagonal line is a visually striking effect. This can be achieved through CSS, as demonstrated in the following example.

To create a diagonal split background, follow these steps:

1. Create two separate divs to represent the two sides of the background. Assign them different classes, such as "left" and "right."
2. Apply solid color or texture backgrounds to each div using the background-color or background-image properties.
3. Position the divs side-by-side using float or display: inline-block.
4. Apply a linear gradient to the background using the background-image property. Use a hard transition to create a sharp diagonal line between the colors or textures.

Here's an example code snippet:

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

This code creates a diagonal split background with a solid gray color on the left side and a texture on the right side. The diagonal line is created using a 30-degree linear gradient.

The above is the detailed content of How to Create a Two-Tone Background Split by a Diagonal Line in CSS?. For more information, please follow other related articles on the PHP Chinese website!