Gradient to accommodate different div sizes - html

Question

I have a gradient which I want to start from left top, it's endpoint can be left as is.
Here are my current testing scenario's:
.test-1{
height: 200px;
border: 1px solid red;
}
.test-2{
height: 400px;
border: 1px solid blue;
}
.test-3{
height: 500px;
border: 1px solid red;
}
.test-4{
height: 600px;
border: 1px solid blue;
}
.gradient{
/* height: 100%;
width: 100%; */
padding: 0;
margin: 0;
background:
linear-gradient(190deg, #FFFFFF 22%, transparent 22.1%),
linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%);
}
<div class="test-1 gradient"></div>
<div class="test-2 gradient"></div>
<div class="test-3 gradient"></div>
<div class="test-4 gradient"></div>
In .test-1, the div is too small, so its gradient is cutting off at the top. In this case, I would want it to end on the top left corner so it doesn't appear as if it's ending abruptly.
.test-2 is the same.
.test-3 is fine, it's not ending abruptly.
.test-4 is also fine, it not in the top left corner, but it's not cut off.
How can I cater this gradient to accommodate different div sizes?

Answer 1

You can adjust the top gradient to make it a triangular shape:
.test-1{
height: 80vh;
border: 1px solid red;
background:
/* position /width height */
linear-gradient(to bottom left,#fff 49.5%,transparent 50%) top/100% 30% no-repeat,
linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%);
}
<div class="test-1 gradient"></div>
And if you want more space at the top add some padding
.test-1{
height: 80vh;
border: 1px solid red;
padding-top: 10vh;
background:
linear-gradient(to bottom left,#fff 49.5%,transparent 50%) top/100% 30% no-repeat,
linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%) no-repeat;
background-origin:content-box;
}
<div class="test-1 gradient"></div>
Or add offset to the gradients:
.test-1{
height: 80vh;
border: 1px solid red;
background:
linear-gradient(to bottom left,#fff 49.5%,transparent 50%)left 0 top 20px/100% 30% no-repeat,
linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%) left 0 top 20px no-repeat;
}
<div class="test-1 gradient"></div>
Another idea is to consider skew transformation
.test-1{
height: 80vh;
border: 1px solid red;
position:relative;
overflow:hidden;
z-index:0;
}
.test-1:before {
content:"";
position:absolute;
z-index:-1;
top:20px; /* Control the space */
bottom:0;
left:0;
right:0;
background:linear-gradient(90deg, #5c9c9b 0%, #8ccdcc 100%);
transform:skewY(8deg);
transform-origin:left;
}
<div class="test-1 gradient"></div>

Answer 2

In the gradient can use vh instead of %
.test-1{
height: 200px;
border: 1px solid red;
}
.test-2{
height: 400px;
border: 1px solid blue;
}
.test-3{
height: 500px;
border: 1px solid red;
}
.test-4{
height: 600px;
border: 1px solid blue;
}
.gradient{
/* height: 100%;
width: 100%; */
padding: 0;
margin: 0;
background:
linear-gradient(190deg, #FFFFFF 60vh, transparent 34.1vh),
linear-gradient(90deg, #5c9c9b 0, #8ccdcc 100vh);
}
<div class="test-1 gradient"></div>
<div class="test-2 gradient"></div>
<div class="test-3 gradient"></div>
<div class="test-4 gradient"></div>