如何创建大于其容器的 div 背景 [重复]

Question

创建与其父容器重叠的 div 的最佳方法是什么。我正在使用引导程序并想创建一个比其容器更大的横幅，我想创建以下内容：

这是我目前的代码：

<div class="container container-white no-pd">

        <div class="service-banner">
            <div class="text-center">
                Headline title here <a href="#" title="title" class="btn btn-default">Our Services</a>
            </div>
        </div><!--/service banner-->

    </div><!--/container-->

这给了我以下信息：

有什么建议吗？

Answer 1

你可以使用伪元素来实现这种功能：

.gray{
    height:300px;
    width:100px;
    background:darkgray;
    position:relative;
}
.banner{
    position:absolute;
    width:350px;
    height:100px;
    background:blue;
    top:20px;
    left:80px;
}
.banner:after{
    position:absolute;
    content:"";
    height:0px;
    width:0px;
    border-left:20px solid transparent;
    border-top:20px solid gray;
    bottom:-20px;
    left:0;
}

<div class="gray">
    <div class="banner">Heading here</div>
</div>

请注意以下内容以进一步了解：

• 我已经能够在我的 CSS 中使用 top、bottom、left 和 right 属性，因为我已经将该元素设置为 position:absolute;。当一个元素被这样定位时，这意味着他们可以使用这些来操作。

• 注意我是如何制作“三角形阴影”的也很重要。这是通过使用“border hack”实现的，其中允许您设置透明边框和“彩色边框”以实现：see here for more info about this。

• 伪元素需要包含content，并且通常定位在absolutely，以便您在标记中很好地定位它们。