- @icons = ['icon-reorder','icon-th-large','icon-bar-chart','icon-tasks','icon-bell','icon-archive','icon-comment','icon-sitemap','icon-thumbs-up','icon-tumblr']
%ul
- @icons.each do |icon|
%li
%a.list-item{:href=>""}
%i{:class=>"#{icon}"}
View Compiled
body {
background: #f2f2f2;
}
ul {
position: relative;
transform: rotate(-35deg) skew(20deg,5deg);
}
.list-item {
background: #000;
color: #575757;
text-align: center;
height: 2.5em;
width: 4em;
vertical-align: middle;
line-height: 2.5em;
border-bottom: 1px solid #060606;
position: relative;
display: block;
text-decoration: none;
box-shadow: -2em 1.5em 0 #e1e1e1;
transition: all .25s linear;
&:hover {
background: #ff6e42;
color: #fffcfb;
transform: translate(.9em, -.9em);
transition: all .25s linear;
box-shadow: -2em 2em 0 #e1e1e1;
&:before,
&:after {
transition: all .25s linear;
}
&:before {
background: #b65234;
width: 1em;
top: .5em;
left: -1em;
}
&:after {
background: #b65234;
width: 1em;
bottom: -2.5em;
left: 1em;
height: 4em;
}
}
&:before,
&:after {
content: '';
position: absolute;
transition: all .25s linear;
width: .5em;
}
&:after {
height: 4em;
background: #181818;
bottom: -2.25em;
left: 1.5em;
transform: rotate(90deg) skew(0,45deg);
}
&:before {
height: 2.5em;
background: #121212;
top: .25em;
left: -.5em;
transform: skewY(-45deg);
}
}
View Compiled