有什么方法可以写出一个波浪图形

项目中需要一个波浪图形组件,由于项目组件化要求不能直接使用图片,求组各位大神帮忙,尽可能使用HTML/5+CSS/3或者canvas完成,少量JS无所谓,设计图如下:
 

QQ图片20170312143510.png

 
已邀请:

我是偏执狂

赞同来自: admin

两种方法,望君喜欢...SVG:
<svg id="wave" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 674 79"><path fill="green" d="M187.7 73c-14.3-2-30.6-7.2-40.2-13-15-9.2-35.7-14-59.3-14-23.5 0-40.6 4-61 15-6 3-14.2 6.7-18 8-3.8 1-7.5 2.5-8.2 3-1 1-1.3-2.8-1.3-21.7V27.5l8.2-.2c10 0 20-3.5 34-11 16-9.5 27-12 45-9.8 16 2 27 6.5 42 17.2 6 4.4 8 5.6 13 6.2 12 1 30-3 48-11 19-9 33-12 47-10 12 1 17 4 34 16 6 5 16 7 28 6 8-1 9-1 21-7 15-7 28-13 39-15 19-4 36-2 61 9 8 4 12 5 26 5 16 0 20-1 42-10 27-10 28-9 50 0 16 7 29 13 44 13 14 0 27.3-6.8 42-12 5-2 11-3 15-4l11 1.4 10 3c2.2 1 12 7 15 7.5l7 3v23c0 19 0 22.5-1.4 22-.6-.3-8 0-16.6.3-11.7.5-19 .3-30-.8-16.3-1-26.3-4-48.7-14-20-9-27-10-48-10-25 0-42 4-75.5 17-9 4-18.6 7-22 7.6-13 2.7-38 1-61-4-15-3-23-5-43.3-12-16.8-5-17.6-5.4-30.8-6-20.5-.7-31.6 2-49.8 12.6-17 9.3-47 14-71.7 11z"/></svg>

CSS:
background: url(data:image/png;base64,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) center / 50% auto repeat-x;

要回复问题请先登录注册