David David - 2 months ago 7
CSS Question

'Cut' page on two sides

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

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>