CSS 形状不与下一个 DIV 重叠答案

【问题标题】：CSS shapes not overlapping next DIVCSS 形状不与下一个 DIV 重叠
【发布时间】：2018-05-12 15:35:53
【问题描述】：

我正在尝试在 CSS 中创建 1 个形状（V 形）。它正在工作，但是当我将形状设为负数并将其放置在另一个具有背景的 div 之前，我无法让形状显示“在”带有背景图像的下一个 div 的“上方”。

见https://www.bootply.com/dennisgodderie/kBHH7SuoHD “内容 2” div 应该位于前一个 div（red-v-neg）之下，但是当我 f.e.使用边距顶部：-100px；它与 red-v-neg div 重叠。即使我使用 z-index。还是我忘记了什么？

【问题讨论】：

您的链接只会导致错误页面。请改为将相关的 sn-ps 添加到您的问题中。
您可以简单地在您的 content2 div 中添加您的 v-shape，或者在您的形状上使用绝对值，并在您的内容 2 上使用正填充，正如异国先生指出的那样，链接对我来说只能工作 5 分钟
@diegie，这个 div 有绝对位置吗？否则 z-index 将不起作用。如果这不起作用，请在您的问题中分享您的代码，因为指向您网站的链接不起作用。
大家好，感谢您的回答。我在这篇文章中添加了 css/html。 div 不是绝对的。我会尝试几分钟...

标签： css twitter-bootstrap twitter-bootstrap-3 shapes

【解决方案1】：

这是我使用的 CSS/HTML 代码

.red-v{
    width:0;
    height:170px;
    border-top: 100px solid transparent;
    border-left: 35vw solid #ed4447;
    border-right: 65vw solid #ed4447;
    border-bottom:0;
}
.red-v-neg{
    width:0;
    height:170px;
    border-bottom: 100px solid transparent;
    border-left: 65vw solid #ed4447;
    border-right: 35vw solid #ed4447;
    border-top:0;
    background: transparent;
}
.content{
    padding:60px 0;
    background: #ed4447;
}
.content-2{
    padding:100px 0;
    background: url(http://victus.be/new/img/home-2b.jpg) no-repeat fixed 80% 50%;
}

<div class="red-v"></div>
<div class="content">
  <h1>Content</h1>
</div>
<div class="red-v-neg"></div>
<div class="content-2">
  <h1>Content 2</h1>
</div>

【讨论】：