层叠div与三角形底边界

Question

这是他的问题的后续行动：Center triangle at bottom of div full width responsively

同样，我仍然坚持使用我的CSS进行涉及底部带有三角形边框的div的项目：

我想要一排级联的div看起来像这样（为了演示目的，下面的tringle为红色）：

我的代码现在看起来像这样：

html, body {
    padding: 0; margin: 0;
    color: white;
}
.top {
    background-color: #282C34;
    height: 500px;
    width: 100%;
    position: relative;
}
.bottom {
    background-color: #3B3E48;
    height: 500px;
    width: 100%;
}
.triangle {
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    width: 0;
    height: 0;
    bottom: -40px;
    content: "";
    display: block;
    position: absolute;
    overflow: hidden;
    left:0;right:0;
    margin:auto;
}
.upperTriangle {
    border-top: 40px solid #282C34;
}
.lowerTriangle {
    border-top: 40px solid red;
}

<div class="top">
    <div class="triangle upperTriangle"></div>
</div>
<div class="bottom">
    <div class="triangle lowerTriangle"></div>
</div>
<div class="top">
    <div class="triangle"></div>
</div>

JSFiddle上的代码：http://jsfiddle.net/rndwz681/

我的问题：

• 我无法弄清楚如何在z轴上正确对齐三角形。
• 我无法弄清楚如何正确地将三角形与除第一个之外的div对齐。

非常感谢您的帮助。

Answer 1

由CSS triangle generator提供支持

＆＃13;

＆＃13;

.container {
  width: 100%;
  overflow: hidden;
}
.block {
  width: 100%;
  height: 200px;
}
.block--arrow {
  position: relative;
}
.block--arrow:before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -350px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 350px 0 350px;
}
.grey {
  background: #626262;
}
.light-grey {
  background: #999999;
}
.light-grey:before {
  border-color: #626262 transparent transparent transparent;
}
.black {
  background: #000000;
}
.black:before {
  border-color: #999999 transparent transparent transparent;
}

＆＃13;

<div class="container">
  <div class="grey block"></div>
  <div class="light-grey block block--arrow"></div>
  <div class="black block block--arrow"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将position:relative;添加到.bottom课程并将z-index:100;添加到.triangle课程中，我就可以按照您希望的方式显示三角形。< / p>

看我的小提琴：http://jsfiddle.net/rndwz681/1/

z-index设置＆＃34;层＆＃34;一个对象出现在（更高的数字=更接近用户）。它只适用于“定位”。元素，但你的绝对定位三角形符合条件。