用2种颜色填充div？

Question

如果一个宽度为500px的div,有没有办法用css填充2种不同颜色的背景？我知道它可以用背景图像完成,但只是想知道它是否可以用bg颜色完成.例如:

Answer 1

您无法设置多种背景颜色,但可以设置如下内容:

div.twocolorish {
    background-color: green;
    border-left: 20px solid red;
}

只要你不需要文本以红色覆盖部分,那么这将在一个div中照顾你.

Answer 2

我最终使用线性渐变得到了这个解决方案：

    .dualcol-test {
        background: linear-gradient(to right, green 0%, green 80%, red 80%, red 100%);
    }

   <div class="dualcol-test"> This div has a green and red background <br><br><br> </div>

Answer 3

你可以使用伪元素:1之前在1 div中实现2种颜色

HTML:

<div class="twocolordiv"></div>

CSS:

.twocolordiv  {
position: relative;
z-index: 9;
background: green;
width:500px;
height:100px;
}

.twocolordiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 20%;
bottom: 0;
left: 0;
background: red;
}