'Cut' page on two sides - html

Question

I want to 'cut' my page on two sides, something like this:
http://i.stack.imgur.com/ngZrp.jpg
DEMO: https://jsfiddle.net/r2g0eyxf/3/
#left {
background: url(https://static.pexels.com/photos/24353/pexels-photo.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#right {
background: url(http://media.caranddriver.com/images/media/51/25-cars-worth-waiting-for-lp-ferrari-488gtb-photo-658256-s-original.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
But:
I need this images responsive
I want to create this 'slash'
How can I do this?
EDIT
This not solving my problem - I need it on full page and without space between images.

Answer 1

An hint would be to use transform and some padding.
average example
body {
margin: 0;
padding: 0;
width:100%;
overflow-x:hidden;
color:turquoise;
text-shadow:0 0 white;
font-size:2em;
}
#left {
position: absolute;
left: -10%;
height: 100%;
}
#left,
#right {
width: 60%;
transform: skew(-15deg);
overflow: hidden;
}
#left .content {
background: url(https://static.pexels.com/photos/24353/pexels-photo.jpg);
height: 100%;
}
#right .content {
height: 100%;
background: url(http://media.caranddriver.com/images/media/51/25-cars-worth-waiting-for-lp-ferrari-488gtb-photo-658256-s-original.jpg);
}
#right {
position: absolute;
right: -10%;
height: 100%;
}
#left .content,
#right .content{
width: 100%;
padding: 0 20%;
margin: 0 -15%;
transform: skew(15deg);
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
<div id="left">
<div class="content">Content here</div>
</div>
<div id="right">
<div class="content">Content here</div>
</div>

Answer 2

You could use clip-path, support.
.clipped-img {
position: relative;
}
.clipped-img img {
position: absolute;
width: 50%;
}
.clipped-img img:nth-child(1) {
-webkit-clip-path: polygon( 0% 0, 100% 0, 80% 100%, 0 100% );
clip-path: polygon( 0% 0, 100% 0, 80% 100%, 0 100% );
}
.clipped-img img:nth-child(2) {
right: 10%;
-webkit-clip-path: polygon( 20% 0, 100% 0, 100% 100%, 0 100% );
clip-path: polygon( 20% 0, 100% 0, 100% 100%, 0 100% );
}
<div class="clipped-img">
<img src="http://placehold.it/500x300/FC0/">
<img src="http://placehold.it/500x300/CC0/">
</div>