How to create a flag using linear-gradient? - css

Question

div{
height: 500px;
width: 900px;
background-image: linear-gradient(to bottom right,green 33% 66%,yellow 66% 100%,black 111% 222%,yellow 0% 5%,blue 0% 10%);
}
<div></div>
here's how its supposed to be:

Answer 1

Do it with multiple background and it will be easier to handle:
.box {
width:300px;
height:200px;
background:
linear-gradient(to bottom right,#21b539 calc(50% - 40px),#f5cf22 0 calc(50% - 30px),#0000 0),
linear-gradient(to top left ,#00a6e0 calc(50% - 40px),#f5cf22 0 calc(50% - 30px),#0000 0)
#000
}
<div class="box">
</div>

Answer 2

try this background: linear-gradient( to bottom right, green 33% 40%, yellow 40% 45%, black 45% 55%, yellow 55% 60%, blue 60% 100% );
Also add a height and width to your div

Answer 3

You have to do something like this:
background-image: linear-gradient(to bottom right,green 35%,yellow 35% 40%, black 40% 60%, yellow 60% 65%, dodgerblue 65%);
Remember the gradient is in the direction top left to bottom right. And a percentage more than 100 don't make any sense.
div {
width: 900px;
height: 500px;
background-image: linear-gradient(to bottom right,green 35%,yellow 35% 40%, black 40% 60%, yellow 60% 65%, dodgerblue 65%);
}
<div>
</div>