多种颜色背景HTML

Question

我正在尝试创建多种颜色的背景来实现这一点：

现在，我设法做到了：

我做了什么：

所需背景：

我正在尝试使用渐变来做到这一点，但似乎不可能结合两个渐变来做到这一点。 （可以做其他事情，但不能这样做）。

有没有办法实现这种背景？

谢谢！

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

}

此处演示

Answer 2

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

Answer 3

最后，我设法做到了：

对于绿色部分：

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

结果如下：

Answer 4

好的，不确定这是否正是您想要的，但这就是我要对css / html进行psd的方式。 请参阅下面的屏幕截图。

这里也是一个工作演示

只需将整个卡包裹在div中，然后应用左边框即可解决问题。

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

如果不想，可以删除盒子阴影，只是觉得自己活跃起来即可。