如何创建一个比其容器大的div背景

Question

创建与其父容器重叠的div的最佳方法是什么？我使用bootstrap并想要创建一个比其容器更大的横幅，我想创建以下内容：

这是我到目前为止的代码：

<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属性，因为我已将该元素设置为{{ 1}}。当一个元素这样定位时，意味着它们可以使用它们进行操作。

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

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