css3写不规则样式背景

请问下这种下方不规则的背景如何用css3写呢？因为用图片，移动端太消耗流量了

---

纵向按曲线水平切线，横向按图形中心分成四个div,然后再设置椭圆边框弧度。。现在想法是这样

---

用css写了一个，写的比较潦草，效果不是完全一致，差不多就是这个意思。
如果要达到一致的效果，参数肯定要调整一番。

http://codepen.io/anon/pen/YqzOQp

---

可以考虑svg