在引導菜單上的CSS Slaint邊緣

Question

我試圖用菜單在引導程序中創建this，我將如何在css中獲得這些斜邊？

這是JsFiddle到目前爲止我已經得到了一個角落是傾斜的，但我似乎不能得到另一個相反的方向。

這裏的CSS我用的上邊緣：

.navbar .nav { 
     float: right; 
     right: 0; 
/*Slant Edges*/ 
     height:0; 
     border-bottom: 40px solid #000; 
     border-right: 40px solid white; 
/*Slant Edges*/ 
    } 

任何幫助非常感謝。

Answer 1

我會完全以使用pseudo-element

CSS：

.nav-collapse:before { 
    content:''; 
     border-top: 40px solid white; 
    border-right: 40px solid #000; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    height:40px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height:100%; 
    width: 40px; 
} 
.nav-collapse:after { 
    content:''; 
    position: absolute; 
    right: 0; 
    height:0; 
    border-top: 40px solid #000; 
    border-right: 40px solid white; 
} 
.nav-collapse{ 
    padding:0 40px 0 0 ; 
} 

DEMO：http://jsfiddle.net/pavloschris/BWM8c/5/