CodePen

HTML

            
              <div class="bg">
  <p>Above image</p>
  <div class="clipper">
    <img src="http://lorempixel.com/output/city-q-c-300-300-4.jpg" alt="">
  </div>
  <p>Below image</p>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .bg {
  background-color: #8db328;
}

.clipper {
  overflow: hidden;
  width: 372px;
  height: 425px;
  margin-bottom: -125px;
  -webkit-transform: matrix(0.707,0.707,-0.707,0.707,-18,-43);
     -moz-transform: matrix(0.707,0.707,-0.707,0.707,-18,-43);
      -ms-transform: matrix(0.707,0.707,-0.707,0.707,-18,-43);
       -o-transform: matrix(0.707,0.707,-0.707,0.707,-18,-43);
          transform: matrix(0.707,0.707,-0.707,0.707,-18,-43);
}

.clipper > img {
  -webkit-transform: matrix(0.707,-0.707,0.707,0.707,10,62);
     -moz-transform: matrix(0.707,-0.707,0.707,0.707,10,62);
      -ms-transform: matrix(0.707,-0.707,0.707,0.707,10,62);
       -o-transform: matrix(0.707,-0.707,0.707,0.707,10,62);
          transform: matrix(0.707,-0.707,0.707,0.707,10,62);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................