Half Background color for div [closed]

问题:

How can I do this kind of design using CSS, the Half background color for div: See the image

回答1:

<div style="background-color: #007700; height: 200px; width: 100%"></div>

It's your green background... just put into that div - another three div-s with content, position them absolute and play with margins:

Ready DEMO. It maybe hard to understand, if you are novice in CSS, but google is powerful.

<div style="background-color: #007700; height: 200px; width: 100%">
   <div style="margin-left: 1%" class="bubu">1</div>
   <div style="margin-left: 33%" class="bubu">2</div>
   <div style="margin-left: 65%" class="bubu">3</div>
</div>

and CSS:

 .bubu {
    position: absolute;
    height: 300px;
    width: 30%;
    margin-top: 50px;
    margin-right: 15px;
    box-shadow: 0 0 10px 3px rgba(100, 100, 100, 0.7);
    border-radius: 10px;
    background-color: white;
    text-align: center;
    padding-top: 10px;
  }

*width could be set in pixels, if you need fixed width.

回答2:

Using linear-gradient on the body element:

html, body{ height:100% } 

body{
  background: linear-gradient(green 40%, transparent 40%) no-repeat;
}

Or using box-shadow (requires px units and not %) :

html, body{ height:100%; margin:0; } 

body{
  box-shadow: 0 200px 0 -100px green inset;
}