CSS Сглаживание краев в меню начальной загрузки

Question

Я пытаюсь создать this в bootstrap с помощью меню, как бы получить эти наклонные края в 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/