仅使用 CSS 渐变为半个 div 着色

Question

是否可以仅将左侧的半个 div 着色而另一侧为绿色？我想在这个图形中的第 19 个日期执行此操作

td.specialDate:first-of-type {
   background-image: linear-gradient(left, lightgreen, lightgreen 50%, transparent 50%, transparent 100%);
   background-image: -webkit-linear-gradient(left, lightgreen, lightgreen 50%, transparent 50%, transparent 100%);
}

Answer 1

是的，你的渐变效果并不算太远：

html, body {
  width:100%;
  height:100%;
}

div {
  width:100%;
  height:100%;
}

div {
  background: linear-gradient(to left, lightgreen 50%, transparent 50%);
}

<div>

</div>

这里还有一个小提琴。

Answer 2

尝试这样的事情：

background: green;
background: -moz-linear-gradient(left, green 0%, white 50%);
background: -webkit-linear-gradient(left, green 0%, white 50%);
background: linear-gradient(to right, green 0%, white 50%);

这是 CodePen 上代码示例的链接

你可以在这个不错的网站上疯狂使用渐变

编辑

如果您想为 div 的一半着色，不带阴影/渐变，请使用以下代码：

background: green;
background: -moz-linear-gradient(left, green 50%, white 50%);
background: -webkit-linear-gradient(left, green 50%, white 50%);
background: linear-gradient(to right, green 50%, white 50%);

如果您想要从左下角到右上角的对角线，请使用以下代码：

background: green;
background: -moz-linear-gradient(45deg, green 50%, white 50%);
background: -webkit-linear-gradient(45deg, green 50%, white 50%);
background: linear-gradient(45deg, green 50%, white 50%);

检查链接的Codepen示例以获取更新的代码示例。