Css 左右边距-容器中为10px

我正在尝试制作一个菜单，使其具有“带状”3d效果，如果它应该“包裹”在容器上的话

问题是，如果我尝试将左边和右边的边距设为-10px并不重要，它只是将div20px推到左边。（至少是镀铬的）。左-10px；右图：-10px也不起作用。可能遗漏了什么

HTML

---

您需要使用

position:absolute如果希望元素延伸到容器宽度之外

或者，将菜单放在容器外
 您需要使用
位置：绝对如果希望元素延伸到容器宽度之外

或者，将菜单放在容器外
 左边和右边加边距怎么样


将其添加到顶部菜单
样式
左右边框加边距如何


将其添加到顶部菜单中

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

#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;
}

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