多种颜色背景HTML

Question

我试图创建一个多色背景来实现这个：

现在我设法做到了：

我做了什么：

所需背景：

我尝试使用渐变来做到这一点，但似乎无法将两个渐变组合起来做到这一点。 （可以做其他事情，但不是这样）。

有没有办法实现这个backgorund？

谢谢！

Answer 1

尝试此操作（根据需要调整百分比和颜色）：

.yourdiv{
background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 70%, #f1f1f1 70%, #f1f1f1 100%);
background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0 );

}

<强> DEMO HERE

Answer 2

我猜你需要显示所需输出中较暗的灰色部分？如果是这样，我建议将其分成几个部分并给出个人背景。 如果你可以发布一些代码。我很乐意提供帮助。

Answer 3

最后，我设法做到了这一点：

这对于GREEN部分：

.assignment-item {
  padding: 5px 5px 0px 10px !important;
  margin:15px auto;
  border-radius: 8px;
  background: linear-gradient(to right,  #4f8b2b 0%,#4f8b2b 2%,#ffffff 2%,#ffffff 100%, transparent) !important;
}

这对于灰色部分：

.assignment-item:before{
  position:absolute;
  z-index:-1;
  bottom:0;
  left:2%;
  width:100%;
  height:25%;
  content:"";
  background-color:#f2f2f2;
}

结果如下：

enter image description here

Answer 4

好的，不确定这是不是你想要的，但这就是我用psd做css / html的方法。请参见下面的屏幕截图。

还是 WORKING DEMO HERE

只需将整张卡片包裹在div中并应用左边框即可。

  border-left-width: 8px;
  border-left-color: rgba(10, 255, 80, 0.75);
  border-radius: 5px;

如果你不想要，你可以删除盒子阴影，只是觉得随之活动。