0

Is a menu like this possible with only CSS?

enter image description here

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

<ul>
    <li class="active">home</li>
    <li>about</li>
    <li>contact</li>
</ul>
Weafs.py
  • 22,731
  • 9
  • 56
  • 78
nbar
  • 6,028
  • 2
  • 24
  • 65

1 Answers1

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);
}
Teknotica
  • 1,096
  • 6
  • 19