¿Hay alguna forma de asegurarse de que todas las rayas de este degradado lineal sean del mismo tamaño?

Question

Tengo problemas para hacer que todas las rayas de este degradado tengan el mismo tamaño; el de abajo es más grande que el resto.

hay alguna forma de prevenir esto?

#flag {
    width:1000px;
    height:600px;

    background-image:linear-gradient(to bottom, 
    #6E0E2E,
    #6E0E2E 16%,
    #2A0614 16%,
    #2A0614 32%,
    #BE1864 32%,
    #BE1864 48%,
    #00923C 48%,
    #00923C 64%,
    #1C562E 64%,
    #1C562E 80%,
    #00FECA 80%,
    #00FECA 96%
    );
}

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

Answer 1

Considere el uso de calc()para tener un resultado preciso y evite lidiar con el número flotante:

#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 -->

También puedes hacerlo con múltiples antecedentes:

#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 -->