背景颜色50%一种颜色和50%另一种颜色

Question

在div的内部,我想在它的宽度的前50%中放置背景颜色,而在另外50%的宽度中放置另一种颜色.理想情况下,调整大小我希望它无缝调整,没有任何瑕疵或抖动效果.

理想情况下,我想避免在代码中使用其他div,因为我正在使用难以更改的现有HTML - 真正寻找100%CSS解决方案.

我正在寻找这样的东西(我用Fireworks嘲笑了这个):

Answer 1

您可以使用类似的东西,但基于您必须支持的浏览器,它可能不适用于所有这些浏览器.

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

Answer 2

您可以使用:before和:after伪元素.

#somediv {
  width:50%;
  height:100px;
  position: relative;
}

#somediv:after, #somediv:before {
  content:' ';
  position: absolute;
  width:50%;
  height:100%;
  z-index: -1;
}

#somediv:after {left: 0px; background: #F00;  }
#somediv:before {right: 0px; background: #00F;}

编辑:像这样http://plnkr.co/edit/hm9bHNuuzh2EK4zwn3nr?p=preview

甚至可以在ie8中工作,渐变不会.

请告诉我这是否需要根据您的需求量身定制.