Cacher is the code snippet organizer for pro developers

// Vars
@skew_angle: 29deg;

// Mixins
.size(@thesize) {
    width: @thesize;
    height: @thesize;
}

.size(@width, @height) {
    width: @width;
    height: @height;
}

// Styles
html, body { .size(100%) }
.wrapp {
  .size(100%);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.tile {
  margin-bottom: 10px;
  overflow: hidden;
}

.tile-tall {
  .size(60%, 250px);
  background-color: #eee;
}

.tile-inner {
  .size(100%);
}

.skew-backwards { height: 100% }

.skew-r {
  transform: skewx(-@skew_angle);
  transform-origin: top;
}

.skew-l {
  transform: skewx(@skew_angle);
  transform-origin: bottom;
}

.bg {
  .size(100%);
  background-size: cover;
  background-position: center;
  
  &-1 { background-image: url(http://placehold.it/400x300) }
}

<div class="wrapp">
  <!-- TILE -->
  <div class="tile tile-tall skew-r">
    <div class="skew-l skew-backwards">
      <div class="tile-inner">
        <div class="bg bg-1"></div>
      </div>
    </div>
  </div>
  <!-- /TILE -->
  <!-- TILE -->
  <div class="tile tile-tall skew-l">
    <div class="skew-r skew-backwards">
      <div class="tile-inner">
        
      </div>
    </div>
  </div>
  <!-- /TILE -->
</div>

$(document).ready(function(){

  function tileWidthOnResize() {
    var width = $('.tile').width();
    var backwards_width = $('.skew-backwards').width();
    var p = 100/backwards_width*width;
    $('.tile-inner').width(width);
  }

  $(tileWidthOnResize);
  window.addEventListener("resize", tileWidthOnResize);

});