CSS3 - 使平行四邊形件垂直導航欄

Question

我只是在學習一些HTML5/CSS3/JS和jQuery的一部分，最近靜得入門到它的大部分，但試圖使導航欄是一堆平行四邊形塊垂直堆疊，迄今只解決此搞亂的是什麼，我爲每個塊，但這使得他們rectanges，我一直在尋找推動每個箱子的頂部，將帶來一個平行四邊形的外觀：

.nav { 
    background-color: blue; 
    border: 1px solid black; 
    border-radius: 3px; 
    margin: 2px; 
    text-align: center; 
    font-family: Verdana; 
    font-weight: bold; 
    font-size: 1em; 
    color: yellow; 
    padding: 15px; 
    cursor: pointer; 
} 

我看到一些有關使用「變換：歪斜（xdeg）」，但似乎並沒有影響到什麼，也許我沒有正確地實現它？

Answer 1

你試過：

.nav { 
/*all your properties */ 
transform: skew(30deg); 
-o-transform: skew(30deg); /* Opera */ 
-ms-transform: skew(30deg); /* IE 9 */ 
-webkit-transform: skew(30deg); /* Safari and Chrome */ 
}