Маржа слева и справа -10px в контейнере

Question

Я пытаюсь сделать меню, чтобы иметь «лентообразный» 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; 
} 

Answer 1

Как насчет границы слева и справа с запасом?

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

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

добавить его в #top-menu стилей

Answer 2

Вам нужно будет использовать position: absolute;, если вы хотите, чтобы элемент продлить за пределы ширины контейнера. Fiddle

В качестве альтернативы, разместите свое меню за пределами контейнера. Fiddle