div {width: 125px; height: 125px; background-color: blue;
display:inline-block;
 margin: -15px 0;
  background-image: url(http://placekitten.com/g/125/125);
  -webkit-clip-path: polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
  clip-path: url('#c1');
}
div:nth-of-type(2n) {background-color: red;background-image: url(http://placekitten.com/g/130/130);}
div:nth-of-type(3n) {background-color: green; background-image: url(http://placekitten.com/g/120/120);}
div:nth-of-type(5n) {background-color: purple; background-image: url(http://placekitten.com/g/135/135);}
div:nth-of-type(7n) {background-color: orange; background-image: url(http://placekitten.com/g/140/140);}
div:nth-of-type(8n) {background-color: pink; background-image: url(http://placekitten.com/g/145/145);}
div:nth-of-type(9n) {background-color: yellow; background-image: url(http://placekitten.com/g/150/150);}
div:nth-of-type(13n) {background-color: black;background-image: url(http://placekitten.com/g/150/195);}

div:nth-of-type(6n) ~ div {
-webkit-transform:  translateX(62.5px); 
transform:  translateX(62.5px);
 
}
div:nth-of-type(12n) ~ div {
  
-webkit-transform:  none; 
transform:  none; 
}div:nth-of-type(18n) ~ div {
-webkit-transform:  translateX(62.5px); 
transform:  translateX(62.5px); 
}
div:nth-of-type(24n) ~ div {
-webkit-transform:  none; 
transform:  none; 
}
div:nth-of-type(30) ~ div {
-webkit-transform:  translateX(62.5px); 
transform:  translateX(62.5px); 
}
div:nth-of-type(36n) ~ div {
-webkit-transform:  none; 
transform:  none; 
}
section {width:800px}