Question

我想创建一个覆盖部分页面的横幅，我可能没有使用正确的术语......

我在越来越多的网站上看到了这一点，但在尝试使用此网站找到网站时，我一直在努力找到要检查的网站。但我确实找到了一个有趣的例子。

http://www.bmbw.com

- 他们的标题徽标大于内容的其余部分，底部两个边缘成角度。 - 他们的“BMBW更新”和“BMBW雪报告”也对他们各自的边缘产生了这种影响。

这是我想要做的风格，但我很好奇最好的方法。

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

但是我也看到了对角效果并且它没有干扰功能。我想我只是想问除了将其构建到图像本身之外还有其他方法可以做到这一点。

任何想法？

Answer 1

使用CSS三角黑客，你可以在没有任何图像的情况下实现这种效果。我创建了一个带有工作示例的jsFiddle：http://jsfiddle.net/P8W7F/

Answer 2

如果您使用CSS3

，CSS渐变和阴影是一种很好的方法

Answer 3

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

最简单的方法是使用厚顶边框的第二个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
}

如何用CSS制作3D横幅叠加（??）

3 个答案: