<nav class="skew-menu">
<ul>
<li><a href="#">Shoes</a></li>
<li><a href="#">Sandals</a></li>
<li><a href="#">Shirts</a></li>
<li><a href="#">Jackets</a></li>
</ul>
</nav>
// Play with the values
@radius: 7px;
@skew: 25deg;
@main-color: tomato;
body{
font-family:Helvetica Neue, Helvetica, sans-serif;
background:@main-color;
}
.skew-menu{
text-align:center;
margin-top:9em;
}
.skew-menu ul{
display:inline-block;
margin:0;
padding:0;
list-style:none;
transform:skew(-@skew);
}
.skew-menu ul li{
background:#fff;
float:left;
border-right:1px solid #eee;
box-shadow:0 1px 1px rgba(0,0,0,0.1);
text-transform:uppercase;
color:#555;
font-weight:bolder;
transition:all 0.3s linear;
&:first-child{
border-radius:@radius 0 0 @radius;
}
&:last-child{
border-right:none;
border-radius:0 @radius @radius 0;
}
&:hover{
background:#eee;
color:@main-color;
}
a{
display:block;
padding:1em 2em;
color:inherit;
text-decoration:none;
transform:skew(@skew);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.