div的一半背景颜色

Question

如何使用CSS（div的半背景颜色）进行这种设计：查看图片

Answer 1

在body元素上使用pyparsing：

html, body{ height:100% } 

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

或使用box-shadow（需要px单位而不是%）：

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

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

Answer 2

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

这是您的绿色背景...刚放入该div-包含内容的另外三个div，将它们定位为绝对值并边距边玩：

Ready DEMO。如果您不是CSS的新手，可能很难理解，但是google功能强大。

<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>

和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;
  }

*如果需要固定宽度，则可以像素为单位设置宽度。