3D Tape

Question

I have the following code for my menu:

HTML:

<div class="container wrapper"> <nav> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">page1</a></li> <li><a href="#">page2</a></li> </ul> </nav> 

And 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 in the right and left corners to look as if it is due to the container (for example, a 3D effect, if we can call it that). I have not tried anything since I have no idea how to achieve this.

I searched Google a bit but did not find a website to check the code. If anyone knows, please point me.

And plus, how can I do this ignoring container padding ? Is it possible to do this with my menu inside a container that has padding and still forces the fields to go beyond it?

NOTE: I am not trying to have someone do this for me, I am trying to figure out which CSS properties should be used to achieve what I want.

To better explain what I wanted:

If this helps, my demo is:

demonstration

Thank you so much for pointing me in the right direction.

Answer 1

You can use borders for pseudo-elements to make 2 dark triangles in the upper left and right corner of the menu bar.

To make the menu bar wider than the container, you can use the negative fields on the left / right:

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>