adjust height of element in css - html

Question

I have this:
.test {
width: 400px;
height: 400px;
background-color: white;
display: inline-block;
background-size: 100px 30px;
background-repeaT: no-repeat;
background-position: center 30px, center center, center 140px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: linear-gradient(25deg, yellow 50%, transparent 50%);
mix-blend-mode: difference;
transition: all 1s;
}
<div class="test one"></div>
I found the pen online, and want to adjust it for my own usage, however, cannot figure out a few things.
I want to move the blue box lower, so it is not as high, but still keep the same shape. So I tried background position, as one would, and it doesn't change anything. I'm relatively an amateur in css so it is probably a silly question, but a question none the less! Appreciate the help

Answer 1

It's because that shape is made with linear gradient as background, so you just need to adjust gradient percentages:
From
background: linear-gradient(25deg, yellow 50%, transparent 50%);
to
background: linear-gradient(25deg, yellow 20%, transparent 20%);
.test {
width: 400px;
height: 400px;
background-color: white;
display: inline-block;
background-size: 100px 30px;
background-repeaT: no-repeat;
background-position: center 30px, center center, center 140px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: linear-gradient(25deg, yellow 20%, transparent 20%);
mix-blend-mode: difference;
transition: all 1s;
}
<div class="test one"></div>