多色背景HTML

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

现在我设法做到了：

我所做的：

所需背景：

我试图用渐变来做，但似乎不可能结合两个渐变来做。（可以做其他事情，但不能做这个）

有没有办法实现这个backgorund

谢谢

试试这个（根据需要调整百分比和颜色）：

---

我猜您需要显示所需输出中的深灰色部分吗？如果是这样的话，我建议把它分成几个部分，并给出个人背景。

---

如果你能发布一些代码。我很乐意帮忙。

最后，我成功地做到了这一点：

对于绿色部分：

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

结果如下：

---

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

也是一个

只需将整张卡片包装成一个div，并应用左边框即可

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

---

如果不想，您可以删除方框阴影，只需使用它来激活移动即可。

请也添加代码？您是指位置和时间加上箭头的灰色背景吗？希望您至少尝试自己编写此代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回您的代码，并解释您尝试了什么以及为什么它不起作用。感谢Pauli的评论。这真的帮了我的忙！！我从来没有想过搜索谷歌，我是一个多么愚蠢的开发者。我最终使用了绿色渐变，灰色渐变：。分配项：在{position:absolute；z-index:-1；bottom:0；left:2%；width:100%；height:25%；content:“；background color:#f2f2；}感谢Godinall的帮助，但正如我昨天评论的那样，我设法找到了一种方法来做我需要的事情，首先使用“.assignment item:before{”然后使用渐变。你可以在评论中看到输出。@CarlosRoig是的，你可以这样做，但我的方法允许你在每张牌中有不同高度的内容，而且看起来仍然很不错，你可以到处玩

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