与CSS倾斜的边界？

Question

这样的菜单只能用CSS吗？

像这样：http://jsfiddle.net/wmgmqrr9/但边框倾斜

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

Answer 1

是的，您可以使用CSS3转换执行此类操作：

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);
}