sloped borders with css?

Question

Is a menu like this possible with only CSS?

Like this: http://jsfiddle.net/wmgmqrr9/ but with sloped borders

<ul>
    <li class="active">home</li>
    <li>about</li>
    <li>contact</li>
</ul>

Answer 1

Yes, you can do something like this, using CSS3 transform:

http://jsfiddle.net/gobuctmn/5/

li {
    float: left;    
    list-style-type: none;
    padding: 5px;
    border: 1px solid;
    display: inline-block;
    transform:skewX(10deg));
    -webkit-transform: skewX(10deg);
    -moz-transform: skewX(10deg);
    -ms-transform: skewX(10deg);
    -o-transform: skewX(10deg);
}