C'è un modo per assicurarsi che tutte le strisce su questo gradiente lineare abbiano le stesse dimensioni?

Question

Ho problemi a rendere tutte le strisce su questo gradiente della stessa dimensione; quello in basso è più grande del resto.

C'è un modo per prevenire questo?

#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

Considera l'uso di calc()per avere un risultato accurato ed evitare di trattare con il numero float:

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

Puoi anche farlo con più sfondi:

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