'Cut' Seite auf zwei Seiten

Question

Ich möchte meine Seite auf zwei Seiten 'schneiden', so etwas wie dieses:

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

Aber:

• Ich brauche diese Bilder reagieren
• ich diesen 'Slash'

Wie kann ich dies tun erstellen?

EDIT
This nicht mein Problem zu lösen - ich es auf ganze Seite benötigen und ohne Raum zwischen den Bildern.

Answer 1

Ein Hinweis wäre die Verwendung von transform und einigen 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

könnten Sie clip-path, support verwenden.

.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>