I want to add a linear gradient of variable top and bottom width

Question

So i want to apply linear gradient to a picture such that, it ends at 75% width at the top and 35% bottom. I have looked around but seem to have no luck so far

Answer 1

You can do this with 2 linear-gradient as follow.

The first gradient will fill until 35% of the width with a rectangular shape, then the second will start when the first one ends with a width of 40% and a triangle shape, so you will have 35%+40% = 75% on the top and we keep 35% at the bottom:

.box {
  height:300px;
  background:
  linear-gradient(to bottom right,rgba(0,180,0,0.7) 50%,transparent 50.5%) calc(35% / 0.6) 0/40% 100% no-repeat,
  linear-gradient(to right,rgba(0,180,0,0.7),rgba(0,180,0,0.7)) 0 0/35.05% 100% no-repeat,
  url(https://lorempixel.com/1000/1000/) center/cover no-repeat
}

<div class="box">

</div>

Almost all the values used are pretty easy to understand. The first gradient is positioned at [0,0] with a width of 35% and a height 100%. For the second one, the height/width are clear but the position is a bit tricky, so I will explain it.

First we need to understand how percentage values works with background-position. You may take a look at this link for more information and some illustration. Considering this, here is a graphic to show the value we need to calculate of background-position-x (that I will call p)

Considering how the background position is calculated we know that p define the percentage outside, x define the percentage inside and both are equal. From this we can have the relation between x and p whic is (x/40) = (p/100) ~ x = 0.4*p. We can also clearly see that p - x is equal to the width of the first gradient which is 35% so we have:

p - x = 35% => p - 0.4*p = 35% => 0.6*p = 35% => p=35%/0.6