CSS（3）＆HTML剪切边缘(CSS (3) & HTML Cut edge)

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:

粗演示： http://jsfiddle.net/W82UV/3/

我想，这包括你的困难症结所在，即缘扭，阴影和边框。

<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);
}

测试在IE 8（不偏斜），9，10，FF，和铬。请注意，我可能会重新标记一点是最终的解决方案（更好的类名和/或ID）清洁剂，并按比例放置的一切。