如何创建比其容器大的 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 属性我已将该元素设置为 position:absolute;。当一个元素像这样定位时，这意味着它们可以使用这些来操作。
注意我是如何制作 'triangle shadow' 的也很重要。这是通过使用 'border hack' 实现的，其中允许您设置透明边框和 'coloured one' 以实现此目的：see here for more info about this.
伪元素需要包含 content 并且通常被定位 absolutely 以便您在标记中很好地定位它们。

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

how to create a div background that is bigger than its container

html

css

ribbon

twitter-bootstrap

css-shapes