0

メニューを使用してブートストラップでこれを作成しようとしていますが、これらの傾斜したエッジを CSS で取得するにはどうすればよいですか?

これはJsFiddleです。これまでのところ、1つのコーナーを傾けることができましたが、反対方向に別のコーナーを取得することはできません。

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 に答える