<nav class="skew-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
.skew-menu{
text-align: center;
}
.skew-menu ul {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
transform: skew(-25deg);
}
.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;
}
.skew-menu ul li:first-child {
border-radius: 7px 0 0 7px;
}
.skew-menu ul li:last-child {
border-right: none;
border-radius: 0 7px 7px 0;
}
.skew-menu ul li:hover {
background: #eee;
color: #000;
}
.skew-menu ul li a {
display: block;
padding: 1em 2em;
color: inherit;
text-decoration: none;
transform: skew(25deg);
}
