How to Achieve Multiple Background Colors in a Single Div with CSS?

Multiple Background Colors for a Single div

In certain scenarios, applying multiple background colors to a div is advantageous over using background images or additional divs. CSS provides various ways to achieve this effect.

1. Linear-Gradient for Two or More Colors:

To create "A" with two colors, as illustrated in the image, use a linear gradient with four positions:

background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);

2. Creating a Smaller Portion for "C":

For "C," use a linear gradient similar to "A," but add a :after selector with a white background to simulate a smaller blue portion:

background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%);
.c:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 20%;
    background-color: white;
}

Improved Alternative for "C":

The previous solution creates an overlapping effect with the white portion. A better alternative is to use the 'background-clip' property, which allows you to clip the background to the specified shape:

background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%);
background-clip: border-box;

The above is the detailed content of How to Achieve Multiple Background Colors in a Single Div with CSS?. For more information, please follow other related articles on the PHP Chinese website!