Home > Web Front-end > CSS Tutorial > How to Create a Two-Tone Background with a Diagonal Split Using CSS?

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

Linda Hamilton
Release: 2024-11-03 03:59:02
Original
587 people have browsed it

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template