A Pen by Joe Watkins.

Flexible-Image-Grid-w-Folded-Corners.markdown

Flexible Image Grid w/Folded Corners

A Pen by Joe Watkins on CodePen.

License.

index.html

<div class="product-image">
  <img src="http://flickholdr.com/1200/1600">
</div>
<div class="product-image">
  <img src="http://flickholdr.com/1200/1600">
</div>
<div class="product-image">
  <img src="http://flickholdr.com/1200/1600">
</div>
<div class="product-image">
  <img src="http://flickholdr.com/1200/1600">
</div>
<div class="product-image">
  <img src="http://flickholdr.com/1200/1600">
</div>
<div class="product-image">
  <img src="http://flickholdr.com/1200/1600">
</div>
<div class="product-image">
  <img src="http://flickholdr.com/1200/1600">
</div>
<div class="product-image">
  <img src="http://flickholdr.com/1200/1600">
</div>

style.scss

@import "compass";
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

.product-image {
  width:100%;
  @media(min-width:42em){
    width:50%;
  }
  @media(min-width:60em){
    width:25%;
  }
  padding:5px;
  position:relative;
  float:left;
  img {
    width:100%;
  }
  &:after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    border-width: 0 20px 20px 0;
    border-color: #333 #fff;
    border-style: solid;
   }
}


















body {
  margin:2em;
}