Can I apply multiple background colors with CSS3?

Question

I know how to specify multiple background images using CSS3 and modify how they are displayed using different options.

Currently I have a

, w

Answer 1

In this LIVE DEMO i've achieved this by using the :before css selector which seems to work quite nicely.

.myDiv  {
position: relative; /*Parent MUST be relative*/
z-index: 9;
background: green;
    
/*Set width/height of the div in 'parent'*/    
width:100px;
height:100px;
}


.myDiv:before {
content: "";
position: absolute;/*set 'child' to be absolute*/
z-index: -1; /*Make this lower so text appears in front*/
   
    
/*You can choose to align it left, right, top or bottom here*/
top: 0; 
right:0;
bottom: 60%;
left: 0;
    
    
background: red;
}

this is my div with multiple colours. It work's with text too!

I thought i would add this as I feel it could work quite well for a percentage bar/visual level of something.

It also means you're not creating multiple divs if you don't have to, and keeps this page up-to-date