只使用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>

还有here's a Fiddle。

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

Here指向CodePen上代码示例的链接

你可以在this不错的网站

上疯狂使用渐变色

修改

如果你想为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示例以获取更新的代码示例。

Answer 3

检查此代码。

   background: -moz-linear-gradient(left, #ffffff 50%, #0f0 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 50%,#0f0 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 50%,#0f0 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

JSFIDDLE

Answer 4

在CSS中使用：

div {
  height: 100px;
  background-color: red;
  background-image:
    linear-gradient(
      to right, 
      red,
      red 50%,
      green 50%,
      green 100%
    );
}

Answer 5

是的，这是可能的。

Here it is。您可以通过单击下面的“复制文本”来复制代码。在这里发帖太长了。

我希望它有所帮助。