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

Creating a Two-Tone Background with Diagonal Split Using CSS

The objective is to create a background design consisting of two halves separated by a diagonal line, with each half featuring a distinct color or texture. The intention is to have this design implemented using two separate divs to facilitate jQuery animations where clicking on either side triggers the expansion or contraction of the respective triangle, simulating a curtain effect.

Solution:

The recommended approach involves utilizing a background gradient with a sharp transition point. This provides a clean and effective method to achieve the desired effect.

CSS Code:

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

In this code, the diagonal-split-background class is applied to the container element. The background-color property defines the solid color for one half of the background, while the background-image property establishes a linear gradient, effectively splitting the background along a diagonal line. The 30deg angle parameter sets the orientation of the diagonal split. The two color values within the gradient determine the hues of the respective halves.

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