如何创建一个大于其容器的 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>

请注意以下事项以进一步了解：

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

• 同样重要的是要注意我是如何制作“三角形阴影”的。这是通过使用“border hack”实现的，它允许您设置透明边框和“彩色边框”以实现此目的：有关此内容的更多信息，请参见此处。

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