'Cut' страница с двух сторон

Question

Я хочу, чтобы 'вырезать' мою страницу с двух сторон, что-то вроде этого:

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%; 
} 

Но:

• Мне нужны эти изображения отзывчивые
• Я хочу создать этот «слэш»

Как я могу это сделать?

EDIT
This не решить мою проблему - мне это нужно на полную страницу и без пробелов между изображениями.

Answer 1

Подсказка будет заключаться в использовании преобразования и некоторых дополнений.

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

Вы можете использовать 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>