CSS线性渐变角位置

Question

I am trying to create an angled background using linear-gradient.

However, I can only work out how to create a white area that goes from the bottom left to the top right.

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

https://jsfiddle.net/bfq3vv6n/

But, I want the white area to start half way up the left side of the page rather than from the bottom, and then finish where it already is in the top right (see image for how I want it to look)

Does anyone know how I can do this?

Answer 1

Something like this would help?

 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> 

I used it with the help of ColorZilla . Also, it provides a lot of tools to make it look like what you expect.

Preview

Answer 2

It's easier to calculate if you set the background size to be double in width.

This way, the center of the gradient will be coherent with the middle point being at the center of the left side:

 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>