Ribbon with a "3D" effect - html

Question

I have the following code for my menu:
HTML:
<div class="container wrapper">
<nav>
<ul class="menu">
<li>Home</li>
<li>page1</li>
<li>page2</li>
</ul>
</nav>
And the CSS:
.wrapper{
padding:20px;
background:#d3d3d3;
height:200px;
}
.menu{
background:#7F7979;
}
.menu li{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
display: inline-block;
}
.menu li a{
color:white;
}
nav ul{
list-style:none;
margin:0
padding:0;
}
What I want to achieve is at the right and left corners to look like it comes from behind the container (like a 3D effect if we can call it this way). Haven't tried anything since I don't have any idea how to achieve this.
I googled a bit but didn't find any website to inspect the code. If someone knows any, please point me out.
And plus, how can I do this by ignoring the container padding? Is it possible to make it with my menu inside this container which has a padding and still forcing the margins to go outside it?
NOTE: I'm not trying to someone do this for me, I'm trying to figure out what CSS properties should I use to achieve what I want.
To better explain what I wanted:
If it helps, my demo:
demo
Thank you so much for pointing me the right direction.

Answer 1

You can use borders on pseudo elements to make the 2 darker triangles on the top left and right of your menu bar.
To make the menu bar wider than it's container, you can use negative left/right margins :
DEMO
header{
width:80%;
margin: 0 auto;
background:#D3D3D3;
padding:100px 0 200px;
}
nav{
position:relative;
height:50px;
background: #7E7979;
margin: 0 -25px;
}
nav:before, nav:after{
content:'';
position:absolute;
top:-10px;
border-bottom:10px dotted #5C5C5B;
}
nav:before{
left:0;
border-left:25px solid transparent;
}
nav:after{
right:0;
border-right:25px solid transparent;
}
<header>
<nav></nav>
</header>