CodePen

HTML

            
              <div class="clipper">
  <img src="http://lorempixel.com/output/city-q-c-300-300-4.jpg" alt="">
</div>
            
          
!
via HTML Inspector

CSS

            
              * {
  box-sizing:border-box;
}

.clipper {
  width:300px;
  height:300px;
  margin:10px auto;
  background:lightgrey;
  position:relative;
}

.clipper img {
}

.clipper:before {
  position:absolute;
  content:"";
  width:0x;
  height:0px;
  border-top:75px solid white;
  border-right:75px solid transparent;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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