이 선형 그라디언트의 모든 줄무늬가 동일한 크기인지 확인하는 방법이 있습니까?

Question

이 그라디언트의 모든 줄무늬를 같은 크기로 만드는 데 문제가 있습니다. 바닥에있는 것이 나머지보다 큽니다.

이것을 막을 방법이 있습니까?

#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

calc()정확한 결과를 얻으려면의 사용을 고려하고 부동 숫자를 처리하지 마십시오.

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

여러 배경으로 할 수도 있습니다.

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