css - 引导菜单上的 CSS Slaint 边缘

Question

我正在尝试使用菜单在引导程序中创建它，我将如何在 css 中获得那些倾斜的边缘？

到目前为止，这是一个JsFiddle，我已经让一个角倾斜，但我似乎无法在相反的方向上得到另一个。

这是我用于 on Edge 的 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 ;
}

演示：http: //jsfiddle.net/pavloschris/BWM8c/5/