css的transform中的样式编写

想要实现这种效果 但是 这红蓝5个块不想用图片 想用css3来写 但是写出来的总是不对 有谁可以指导下 ？我使用的是transform:skew 但还是没实现这种效果。

---

       .div1{
        background: blue;
        -webkit-transform:skewY(5deg);
       }
       .div2{
        background: green;
        -webkit-transform:skewY(-5deg);
       }
       .div3{
        background: red;
         -webkit-transform:skewY(5deg);
       }