How to Create Multiple Background Colors on a Single DIV Element?

Multiple Background Colors on a Single DIV

Achieving Color Division on a DIV Element

To divide a DIV element into multiple color sections, adjust the number of color stop values in your linear gradient. For instance, creating two sections requires three colors, while four colors are needed for four sections. By specifying the percentage at which each color transition occurs, you can create the desired color division.

Controlling Color Section Sizes

To make one section smaller than the others, use the CSS :after pseudo-element. This element creates an overlay that can be sized and positioned independently. Applying a contrasting background color to the :after element creates the illusion of a smaller color section without physically dividing the DIV.

Here are improved examples with better cross-browser support:

A. Two Color Sections

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

B. Three Color Sections

.three-colors {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 33%,
    #f6f6f6 33%,
    #f6f6f6 66%,
    #33ccff 66%,
    #33ccff 100%
  );
}

C. Smaller Blue Section

.smaller-blue {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 50%,
    #33ccff 50%,
    #33ccff 100%
  );
  position: relative;
}

.smaller-blue:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  height: 20%;
  background-color: white;
}

These examples demonstrate how to achieve multiple background colors on a single DIV element and control their sizes using the :after pseudo-element, providing a versatile way to design complex color patterns without the need for additional HTML elements.

The above is the detailed content of How to Create Multiple Background Colors on a Single DIV Element?. For more information, please follow other related articles on the PHP Chinese website!