只需使用 线性渐变 作为背景，您就可以轻松调整方向，颜色以及每种颜色的百分比：
body { margin: 0; background: linear-gradient(to right, red 50%, blue 0%); height:100vh; text-align:center; color:#fff;}some contentbody { margin: 0; background: linear-gradient(to bottom, red 60%, blue 0%); height:100vh; text-align:center; color:#fff;}some content或使用 伪元素 和简单的 背景颜色， 然后简单地控制伪元素的位置/大小即可控制两个背景：
body { margin: 0; background: red; height: 100vh; position: relative; text-align:center; color:#fff;}body:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 50%; background: blue; z-index:-1;}some contentbody { margin: 0; background: red; height: 100vh; position: relative; text-align:center; color:#fff;}body:before { content: ""; position: absolute; top: 0; bottom: 40%; left: 0; right: 0; background: blue; z-index:-1;}some content如果你想要更多
您可以在渐变内组合不同的颜色，也可以使用多个线性背景，以便为背景实现更复杂的颜色划分：
body { margin: 0; background:linear-gradient(30deg, red 50%, blue 50%, blue 70%,orange 70%) left/50% 100% no-repeat, linear-gradient(-30deg, red 50%, blue 50%, blue 70%,orange 70%) right/50% 100% no-repeat; height:100vh; text-align:center; color:#fff;}some content您还可以对伪元素执行相同的操作，还可以使用一些CSS转换（旋转，倾斜等）：
body { margin: 0; background: red; height: 100vh; position: relative; text-align: center; color: #fff; overflow: hidden;}body:before { content: ""; position: absolute; top: 0; bottom: 0; left: -50%; right: 50%; background: blue; transform: skew(30deg); z-index: -1;}body:after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: -50%; background: orange; transform: skew(-30deg); z-index: -1;}some content
