CSS (3) & HTML Cut edge

Question

This has already been asked, but I need it in a different way. Please have a look at the image below to see the nav bar I try to realize:

Problems:

• Shadow around the edges
• Text / Images inside the bar
• 1px solid border around the figure would be great

Of course a static image could do this, but I would like to use something else. Do you have any ideas, how to do that (with as much browser support as possible)?

EDIT: <nav> is absolute positioned

Here is what I did so far

But it is not possible to apply a border and the fixed sizes are also problematic.

    nav {
       float: left;
       position: absolute;
       background-color: #ffffff;
       top: 0;
       left: 0;
       display: inline;
       padding: 12px;
       padding-right: 0;
       width: auto;
    }

    .behind_nav {
       height: 60px;
       width: 523px;
       position: absolute;
       top: 0;
       left: 0;
       border-right: 20px solid transparent;
       border-top: 48px solid white;
    }

.behind_nav is behind <nav> (surprise, surprise). Actually this works well except for the shadow and border problem stated above. Also it is bound to a fixed value, which is problematic. <nav> fits width to content (which might differ due to CMS data / browser)

Answer 1

Rough demo: http://jsfiddle.net/W82UV/3/

I think this covers the crux of your difficulties, i.e. the edge skew, drop shadow, and border.

<div id="top">
    The top bar
</div>
<div id="container">
    <div id="background">        
    </div>
    <nav>
        Test
    </nav>
</div>

#top{  
    background-color: #f0f0f0;
    border-bottom: 1px solid #555;
    box-shadow: 8px 8px 8px #aaa;
}

#container {
    position: relative;
    top: -1px;
    overflow: hidden;
    height: 96px;
}

#background {
    background-color: #f0f0f0;

    position: absolute;
    top: -1px;
    left: -32px;
    border: 1px solid #555;

    width: 400px;
    height: 64px;
    box-shadow: 8px 8px 8px #aaa;

   -webkit-transform: skew(-20deg); 
   -moz-transform: skew(-20deg); 
   -o-transform: skew(-20deg);
   -ms-transform: skew(-20deg); 
   transform: skew(-20deg);
}

Tested in IE 8 (doesn't skew), 9, 10, FF, and Chrome. Note that I would probably rearrange the markup a little to be cleaner for the final solution (better class names and/or IDs), and position everything proportionately.