因为需要波浪作为背景图，单独用一张图作为背景不匹配屏幕分辨率，查了下用svg绘制比较合适，网上没有找到现成的，自己写了一个，非常简单，可供参考。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div>
<svg width="100%" height="370px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop stop-color="rgb(136,124,246)" offset="0%"/>
<stop stop-color="rgb(89,150,255)" offset="50%"/>
</linearGradient>
</defs>
<!-- Wave -->
<g id="wave">
<path d="M 0 30 Q 320 0 1000 45 T 2000 30 V 2000 370 H 370 0 Z" stroke-linecap="round" fill="url(#Gradient1)"/>
</path>
</g>
</svg>
</div>
</body>
</html>
运行效果如下，带有渐变颜色的波浪色块背景就实现了。
image.png
