Use CSS3 gradients (Gradients) to realize the background color palette
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
margin: 100px auto;
width: 600px;
height: 300px;
background: linear-gradient(to bottom right, #f5731d, #f5731d 50%, #4fd1f8 50%, #4fd1f8 );
/*50% 表示颜色开始的高度*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Effect
More ways to play
background: linear-gradient(145deg, #f5731d, #f5731d 50%, #4fd1f8, #4fd1f8 50%);
/*用角度指定渐变方向*/
background: linear-gradient(145deg, #f5731d, #f5731d 30%, #4fd1f8 30%, #4fd1f8 70%, #f84fea 70%, #f84fea );
Disadvantages: there will be jagged at the junction