CSS(3)和HTML剪切边缘

Question

这已被问到,但我需要以不同的方式.请看下面的图片,看看我尝试实现的导航栏:

问题:

• 边缘周围的阴影
• 栏内的文字/图片
• 图周围的1px实线边框会很棒

当然静态图像可以做到这一点,但我想使用其他东西.您有任何想法,如何做到这一点(尽可能多的浏览器支持)？

编辑: <nav>绝对定位

这是我到目前为止所做的

但是不可能应用边框,固定尺寸也存在问题.

    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落后<nav>(惊讶,惊讶).实际上除了上面提到的阴影和边界问题外,这种方法效果很好.它也受固定值的限制,这是有问题的.<nav>适合宽度与内容(由于CMS数据/浏览器可能会有所不同)

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和Chrome.请注意,我可能会稍微重新排列标记以使最终解决方案更清晰(更好的类名和/或ID),并按比例放置所有内容.