How to Create a Two-Tone Background with a Diagonal Line Using CSS?

Creating a Two-Tone Background with a Diagonal Line

To achieve a background divided into two sections by a diagonal line using CSS, follow these steps:

1. Create Two Divs:
Create two separate divs to represent the two background sections.

2. Style the Divs:
Apply the following CSS to the divs:

<code class="css">.solid-div {
  background-color: [solid color];
}

.textured-div {
  background-image: url([texture image URL]); /* Replace with actual image URL */
}</code>

3. Position the Divs:
Use CSS positioning (e.g., absolute or fixed) to place the two divs side by side, ensuring they cover the entire screen.

4. Create the Diagonal Line:
To create the diagonal line, you can use a CSS gradient:

<code class="css">.background-container {
  background: -webkit-linear-gradient(30deg, [solid color] 50%, [textured-color] 50%);
}</code>

5. Animate the Divs:
Utilize jQuery to control the div sizes based on user clicks, creating the "curtain effect" you desire.

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