0

コンテナを「ラップ」する必要がある場合、「リボンのような」3D効果を持つメニューを作成しようとしています。

問題は、margin-left と right を -10px にしようとしても問題ないことです。div を 20px だけ左に押します。（少なくともクロムで）。そして左: -10px; 右: -10px も機能しません。何が欠けている可能性がありますか？

http://jsfiddle.net/lasseedsvik/UhwYg/1/

HTML

<div id="container">
    <div id="top-menu">
        <ul></ul>
    </div>
</div>

CSS

#container {
    background: blue;
    height: 300px;
    width: 200px;
    margin: 0 auto;
}

#top-menu {
    clear: both;
    background: red;
    width: 200px;  /* +20px? */
    height: 20px;
    position: relative;
    /*
    margin-left: -10px;
    margin-right: -10px;
    */
}

#top-menu::before, #top-menu::after {
    content:' ';
    position: absolute;
    bottom: -10px;
}

#top-menu:before {
    border-top: 10px solid red;
    margin-left: -10px;
    border-left: 10px solid transparent;
    left: 0;
}

#top-menu:after {
    border-top: 10px solid red;
    margin-right: -10px;
    border-right: 10px solid transparent;
    right: 0;
}
4

2 に答える 2

3

左右に余白のあるボーダーはいかがですか？

http://jsfiddle.net/parslook/UhwYg/2/

border-left: 10px solid red;
border-right: 10px solid red;
margin-left:-10px;

#top-menuスタイルに追加する

于 2013-09-11T07:29:06.343 に答える