Wie die Hintergrundfarbe spalten in 4

Question

Ich habe dieses div:

<div data-role="page" id="menupage"></div> 

, dass der Körper von einer Seite darstellt. Und ich möchte seinen Hintergrund in 4 Farben machen. Ich weiß, wie man es machen in 2:

#menupage { 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(
    to right, 
    #FFF 0%, 
    #FFF 50%, 
    #008DD2 50%, 
    #008DD2 100% 
); 
} 

ich so etwas wie dieses haben wollen:

PS: wenn Sie die Farben mögen:

orange: #F26522; 
green: #BBC274; 

Can jemand Hilfe? Vielen Dank!

Answer 1

Mit CSS3 können Sie multiple backgrounds anwenden.

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#menupage{ 
 
    width: 100%; 
 
    height: 100vh; 
 
    background: linear-gradient(to right, #FFF 0%, #FFF 50%, #008DD2 50%, #008DD2 100%), linear-gradient(to right, #F2651C 0%, #F2651C 50%, #BCC375 50%, #BCC375 100%); 
 
    background-size: 100% 50%; 
 
    background-position: center top, center bottom; 
 
    background-repeat: no-repeat; 
 
}

<div data-role="page" id="menupage"></div>