CSS线性渐变角度位置

Question

我正在尝试使用线性渐变创建有角度的背景。

但是，我只能弄清楚如何创建一个从左下角到右上角的白色区域。

background: linear-gradient(to right bottom, #ffffff 49.8%, #e0e0e0 50%);

https://jsfiddle.net/bfq3vv6n/

但是，我希望白色区域从页面左侧的一半开始，而不是从底部开始，然后在右上角完成（参见图片了解我希望它的外观）

有谁知道我该怎么做？

Answer 1

如果将背景尺寸设置为宽度的两倍，则计算起来会更容易。

这样，渐变的中心将与左侧中心的中点一致：

div {
  width: 200px;
  height: 200px;
  border: solid 1px green;
  background-image: linear-gradient(153.43deg, white 50%, gray 50%);
  background-size: 200% 100%;
  background-position: right top;
}

<div></div>