如何使一个3D的旗帜覆盖（??）与CSS

我想创建一个横幅，越过页面的一部分，我可能没有使用正确的术语...如何使一个3D的旗帜覆盖（??）与CSS

我见过这在越来越多的网站上，但同时试图找到使用这个网站，我一直在努力找到检查。但我确实找到了一个有趣的例子。

http://www.bmbw.com

-Their头标志是比内容的其余部分较大，与底部的两个边缘的角度。 -Their“BMBW更新”和“BMBW雪情报告”也对各自的这种效果边缘。

这是我试图做的风格，但我很好奇最好的方式来做到这一点。

更新，雪情报告和导航（使标题看起来像3d）具有内置到图像中的效果。

但我也看到了对角效果，它不会影响功能。我想我只是问是否有另一种方式来做到这一点，而不是将其构建到图像本身中。

任何想法？

来源

2011-12-12 Brett

实际上，你可以做到这种效果没有任何使用CSS三角进攻任何图片做的好方法。我创建了一个带有一个工作示例的jsFiddle：http://jsfiddle.net/P8W7F/

来源

2011-12-12 22:05:22 Aaron

+1不错，从来没有听说过这个伎俩 - 你可以添加链接给你r发布？ – ptriek

CSS渐变和阴影是如果你使用CSS3

来源

2011-12-12 21:39:59 Mike

我查看了他们的页面，但他们已经用图像完成了它。

最简单的方法是有一个厚顶边的第二个div。如果你有这样的HTML：

<div class="banner">first content</div> 
<div class="shadow_simple"></div> 
<div class="next_content">next content block</div>

那么这个CSS就可以了：

.banner { 
    width: 400px; 
    margin:auto; 
    text-align:center; 
    background-color:#eee8aa; 
} 
.shadow_simple { 
    margin:auto; 
    width: 360px; 
    height:12px; 
    border-top: 12px solid #daa520; 
    border-left: 20px solid white; 
    border-right: 20px solid white; 
    border-bottom: none; 
} 
.next_content { 
    width: 360px; 
    margin:auto; 
    text-align:center; 
    background-color:#eee8aa; 
    border: 1px solid #daa520; 
    margin-top:-24px; 
}

相同，但有梯度的三角形：

<div class="banner">first content</div> 
<div class="shadow_gradient"> 
    <div class="shadow_simple"></div> 
</div> 
<div class="next_content">next content block</div>

而CSS：

.banner { 
    width: 400px; 
    margin:auto; 
    text-align:center; 
    background-color:#eee8aa; 
} 
.shadow_simple { 
    margin:auto; 
    width: 360px; 
    height:12px; 
    border-top: 12px solid transparent; 
    border-left: 20px solid white; 
    border-right: 20px solid white; 
    border-bottom: none;  
} 
.shadow_gradient { 
    width: 400px; 
    height:24px; 
    margin:auto; 
    margin-bottom:12px; 
    box-shadow: inset 0px 5px 12px #daa520; 
} 
.next_content { 
    width: 360px; 
    margin:auto; 
    text-align:center; 
    background-color:#eee8aa; 
    margin-top:-36px; 
    border:1px solid #daa520 
}

来源

2011-12-12 22:14:56

现在我看到它与Aaron所说的基本相同。 –

如何使一个3D的旗帜覆盖（??）与CSS

回答

相关问题