Is There Any Way To Make Sure All The Stripes On This Linear-gradient Are The Same Size?

I am having issues with making all the stripes on this gradient the same size; the one on the bottom is bigger than the rest. Is there any way to prevent this?

Solution 1:

Consider the use of calc() to have an accurate result and avoid dealing with float number:

#flag {
    width:1000px;
    height:600px;
    background:
     linear-gradient(180deg, 
       #6E0E2E0calc(1*100%/6),
       #2A06140calc(2*100%/6),
       #BE18640calc(3*100%/6),
       #00923C0calc(4*100%/6),
       #1C562E0calc(5*100%/6),
       #00FECA0calc(6*100%/6));

}

<divid="flag"></div><!-- flag -->

You can also do it with multiple background:

#flag {
    width:1000px;
    height:600px;
    background:
     linear-gradient(#6E0E2E00) 0calc(0*100%/5),
     linear-gradient(#2A061400) 0calc(1*100%/5),
     linear-gradient(#BE186400) 0calc(2*100%/5),
     linear-gradient(#00923C00) 0calc(3*100%/5),
     linear-gradient(#1C562E00) 0calc(4*100%/5),
     linear-gradient(#00FECA00) 0calc(5*100%/5);
    background-size:100%calc(100%/6);
    background-repeat:no-repeat;

}

<divid="flag"></div><!-- flag -->