CSS线性渐变角度位置答案

【问题标题】：CSS linear gradient angle positionCSS线性渐变角度位置
【发布时间】：2016-12-14 12:45:10
【问题描述】：

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

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

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

https://jsfiddle.net/bfq3vv6n/

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

有人知道我该怎么做吗？

【问题讨论】：

你想展示它应该是什么样子的图像吗？
@PraveenKumar 我添加了一张图片
太完美了。帮助。
我已经回答了。检查一下，如果好，请接受。
伙计，这个答案有用还是看起来不错？

标签： css background gradient linear-gradients

【解决方案1】：

这样会有帮助吗？

div {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e0e0e0+40,e0e0e0+100&0+0,0+39,1+40,1+100 */
  background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(225,225,225,0) 39%, rgba(224,224,224,1) 40%, rgba(224,224,224,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(225,225,225,0) 39%,rgba(224,224,224,1) 40%,rgba(224,224,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(225,225,225,0) 39%,rgba(224,224,224,1) 40%,rgba(224,224,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#e0e0e0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  height: 100px;
  width: 100px;
  border: 2px solid #ccc;
}

&lt;div&gt;&lt;/div&gt;

我在ColorZilla 的帮助下使用它。此外，它还提供了许多工具来使它看起来像您所期望的那样。

预览

【讨论】：

【解决方案2】：

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

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

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

&lt;div&gt;&lt;/div&gt;

【讨论】：