如何在4中分割背景颜色

Question

我有这个div：

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

代表页面的正文。我希望以4种颜色制作它的背景。我知道如何在2中实现它：

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

我想要这样的事情：

PS ：如果您喜欢这些颜色：

orange: #F26522;
green:  #BBC274;

有人可以帮忙吗？谢谢！

Answer 1

使用CSS3，您可以应用multiple backgrounds。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;