CSS形状不与下一个DIV重叠

我试图在CSS中创建一个形状（V形）。这是可行的，但当我将形状设置为负片并将其放置在另一个具有背景的div之前时，我无法使形状显示在具有背景图像的下一个div的“上方”

看

---

“内容2”分区应位于前一分区（红色-v-neg）的下方，但当I.f.e.使用页边距顶部时：-100px；它与红色v-neg div重叠。即使我使用z-index。还是我忘了什么？

这是我用于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>

.red-v{
宽度：0；
高度：170px；
边框顶部：100px实心透明；
左边框：35vw实心#ed4447；
右边框：65vw solid#ed4447；
边界底部：0；
}
.red-v-neg{
宽度：0；
高度：170px；
边框底部：100px实心透明；
左边框：65vw纯色#ed4447；
右边框：35vw solid#ed4447；
边界顶部：0；
背景：透明；
}
.内容{
填充：60px0；
背景#ed4447；
}
.内容-2{
填充：100px0；
背景：url(http://victus.be/new/img/home-2b.jpg)无重复固定80%50%；
}
内容
内容2

您的链接只会导致错误页面。请将相关的片段添加到您的问题中。您可以简单地将您的v形添加到content2 div中，或者在您的形状上使用绝对值，并在内容2中使用正填充，正如sir Victory指出的那样，链接仅在5分钟内就可以正常工作me@diegie，该div是否有绝对位置？否则，z索引将不起作用。如果这不起作用，请在你的问题中分享你的代码，因为你网站的链接不起作用。嗨，伙计们，谢谢你们的回答。我在这篇文章中添加了css/html。div不是绝对的tho。我要试一下，几分钟后。。。