How to create a two-toned CSS background with a diagonal line?

Diagonal Line Divides Two-Toned CSS Background

Achieving a background with multiple colors separated by a diagonal line requires a creative approach. Here's a method that employs separate DIVs:

The provided code uses a background gradient with a hard transition to create the division:

<code class="css">.diagonal-split-background {
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}</code>

This solution offers a clean and seamless transition between the two background colors. By adjusting the angle and color values, you can customize the look of the diagonal line and the contrasting colors.

The above is the detailed content of How to create a two-toned CSS background with a diagonal line?. For more information, please follow other related articles on the PHP Chinese website!