傾斜的邊界與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); 
}