Ribbon with a “3D” effect

Question

I have the following code for my menu:

HTML:

    

        
<         


        
                      

              相关标签:
       
      

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>