%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
This Pen doesn't use any external CSS resources.