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, 
       #6E0E2E 0 calc(1*100%/6),
       #2A0614 0 calc(2*100%/6),
       #BE1864 0 calc(3*100%/6),
       #00923C 0 calc(4*100%/6),
       #1C562E 0 calc(5*100%/6),
       #00FECA 0 calc(6*100%/6));

}

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

You can also do it with multiple background:

#flag {
    width:1000px;
    height:600px;
    background:
     linear-gradient(#6E0E2E 0 0) 0 calc(0*100%/5),
     linear-gradient(#2A0614 0 0) 0 calc(1*100%/5),
     linear-gradient(#BE1864 0 0) 0 calc(2*100%/5),
     linear-gradient(#00923C 0 0) 0 calc(3*100%/5),
     linear-gradient(#1C562E 0 0) 0 calc(4*100%/5),
     linear-gradient(#00FECA 0 0) 0 calc(5*100%/5);
    background-size:100% calc(100%/6);
    background-repeat:no-repeat;

}

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