0

我正在尝试使用菜单在引导程序中创建它,我将如何在 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*/
    }

非常感谢任何帮助。

4

1 回答 1

0

我会完全使用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/

于 2013-03-15T08:58:21.047 回答