Create a transparent div that cuts into another div - html

Question

I have two divs on top of each other. I need the bottom div to have a slanted angle like this:
I only need help with slant of the top of the blue div, I can handle to bottom slant myself.
I could create a psuedo element and skew it, but the issue is that the blue div has a gradient and making a psuedo element with the same gradient makes the two elements not flow together with their gradients.
I think my only solution is to create a transparent div, skew it and place it on top of the blue div. I was wondering if this is even possible to create a skewed transparent div and have it cut into the blue div, slanting the blue div while showing the image in the background.
I'm open to any other ideas to achieve this slanted div.
Ive created a simple jsfiddle with the divs for anyone to mess around with.
Here is the basic mark up:
<div class="main">
<div class="main-top">
</div>
<div class="main-bottom">
</div>
</div>
.main-top {
background: url("http://stock-wallpapers.com/wp-content/uploads/2015/01/Huawei_P7_home_wallpaper_02_.jpg") center center no-repeat;
background-size: cover;
height: 300px;
width: 600px;
}
.main-bottom {
height: 300px;
width: 600px;
background-image: -moz-linear-gradient( -51deg, rgb(28,35,80) 0%, rgb(27,31,71) 41%, rgb(25,26,62) 100%);
background-image: -webkit-linear-gradient( -51deg, rgb(28,35,80) 0%, rgb(27,31,71) 41%, rgb(25,26,62) 100%);
position: relative;
top: -150px;
}
Thanks

Answer 1

It is in fact very easy if you use this site
http://bennettfeely.com/clippy/
.main-top {
background: url("http://stock-wallpapers.com/wp-content/uploads/2015/01/Huawei_P7_home_wallpaper_02_.jpg") center center no-repeat;
background-size: cover;
height: 300px;
width: 600px;
}
.main-bottom {
height: 300px;
width: 600px;
background-image: -moz-linear-gradient( -51deg, rgb(28, 35, 80) 0%, rgb(27, 31, 71) 41%, rgb(25, 26, 62) 100%);
background-image: -webkit-linear-gradient( -51deg, rgb(28, 35, 80) 0%, rgb(27, 31, 71) 41%, rgb(25, 26, 62) 100%);
position: relative;
top: -150px;
-webkit-clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 68%);
clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 68%);
}
<div class="main">
<div class="main-top">
</div>
<div class="main-bottom">
</div>
</div>