%section
  - (1..200).each do |i|
    .flat3d
      %span
View Compiled
section {
  width: 114%;
  height: 110%;
  overflow: hidden;
  text-align:center;
  margin-top: -10%;
  margin: 0 -14%;
}
span {
  margin-top: 1.5%;
}
.flat3d {
  display: inline-block;
  /*float: left;*/
  position: relative;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  margin-left: 56px;
  margin-bottom: 72px;
  background: beige;
  border-radius: 5px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  transform: translateY(50%) skewY(33deg) scaleY(1.1);
  
  &:before {
    content: "";
    position: fixed;
    top: -2px;
    left: 55px;
    width: 50px;
    height: 50px;
    background: beige;
    border-radius: 20px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    transform: skewY(-50deg) translateX(0%) translateY(-60%);
  }
  &:after {
    content: "";
    position: fixed;
    top: -4px;
    left: 53px;
    width: 50px;
    height: 50px;
    background: beige;
    border-radius: 20px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    transform: translateY(-109%) skewX(-40deg) translateX(-50%) scaleY(1.19);
  }
  span {
    content: "";
    position: fixed;
    top: 47px;
    left: 108px;
    width: 50px;
    height: 50px;
    background: beige;
    border-radius: 20px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    transform: translateY(-109%) skewX(-40deg) translateX(-50%) scaleY(1.19);
  }
}
* {
  margin: 0;
  padding: 0;
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body{
  width: 100%;
  height: 100%;
}
body {
  -webkit-perspective: 1000px;
  -webkit-perspective-origin: 200px -150px;
  background-color: brown;
  display: flexbox;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js