CSS線性漸變角度位置

我想創建一個使用線性漸變的有角度的背景。

但是，我只能解決如何創建從左下角到右上角的白色區域。

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

https://jsfiddle.net/bfq3vv6n/

但是，我想要的白色區域的頁面，而不是從底部的左側開始半山腰，然後完成它已經是在右上方（見圖片我希望它看起來如何）

有誰知道我該怎麼做？

來源

2016-12-14 ChatNoir

你想顯示的圖像應該如何看？ –

@PraveenKumar我已添加圖片 – ChatNoir

這很完美。幫助。 –

它很容易，如果你設置的背景大小爲寬雙重計算。

這樣，漸變的中心將與之協調一致的中間點是在左側的中心：

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>

來源

2016-12-14 17:19:32 vals

正是我在找什麼，謝謝！ – ChatNoir

這樣的事情會有幫助嗎？

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的幫助下用它。此外，它提供了很多工具，使它看起來像你所期望的。

預覽

來源

2016-12-14 13:03:56

CSS線性漸變角度位置

回答

相關問題