CSS线性渐变角位置

Question

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

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

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

https://jsfiddle.net/bfq3vv6n/

但是，我希望白色区域从页面左侧开始，而不是从底部开始，然后在右上角已经完成（请参阅图像，了解我希望它看起来如何）

有谁知道我怎么做到这一点？

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

 <div></div> 

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

预习

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

 <div></div>