How to Apply Multiple Background Colors to a Single Div Using CSS Gradients?

Applying Multiple Background Colors to a Single Div

To achieve multiple background colors within a single div, CSS provides the background property that supports linear gradients. Here's how you can implement the scenarios you've described:

Scenario 1: Creating a Split-Colored Div (A)

To create a div with a split background (similar to "A" in your image), use a linear gradient with four color stops:

div.A {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 50%,
    #f6f6f6 50%,
    #f6f6f6 100%
  );
}

Scenario 2: Making One Portion Smaller Than the Other (C)

In the "C" scenario, you want to make the blue portion smaller in height. This can be achieved by using the :after pseudo-element along with a white background:

div.C {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 50%,
    #33ccff 50%,
    #33ccff 100%
  );
}

div.C:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 20%; /* Adjust this value to control the height of the blue portion */
  background-color: white;
}

Note: For better cross-browser compatibility, consider using vendor prefixes for the background property as seen in the provided code snippets.

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