CSS：连续显示三角形

Question

我的 HTML 标记 CSS 可在此link中看到。在这里，您可以看到带框的最后一个三角形看起来很好。实际上，这里我用盒子制作了3个三角形。在每个box-1-wrap, box-2-wrap和box-3-wrap中，都有一个框和一个三角形。

现在，我希望显示第一个div的三角形。他们排成一列。所以在这里我希望第一行显示在第二个框的上方，第二个三角形应显示在第三个框的上方。

有人可以在这里帮助我吗？

以下是输出文件的外观：

Answer 1

您所要做的就是将下的每个连续框放在上一个框之前。

将此添加到您的CSS：

.box-1-wrap{
    position:relative;
    z-index:3;
}
.box-2-wrap{
    position:relative;
    z-index:2;
}
.box-3-wrap{
    position:relative;
    z-index:1;
}

以下是演示：http://jsfiddle.net/PrDyq/11/

Answer 2

.box-1-wrap, .box-2-wrap, .box-3-wrap {
  display: inline-block;
}
.light-blue-box {
  padding: 20px 40px;
  height: 0;
  background: #2D98F0;
  display:inline-block;
}
.arrow-first {
width: 0;
height: 0;
border-left: 20px solid #2D98F0;
border-top: 20px solid #2B90E3;
border-bottom: 20px solid #2B90E3;
display: inline-block;
margin: 0 0 0 -5px;
}
.light-blue-box-2 {
  padding: 20px 40px;
  height: 0;
  background: #2B90E3;
  display:inline-block;
  margin:0 0 0 -4px;
  z-index:999;
}
.arrow-second {
  width: 0;
  height: 0;
  border-left: 20px solid #2B90E3;
border-top: 20px solid #2879BB;
border-bottom: 20px solid #2879BB;
  display: inline-block;
  margin: 0 0 0 -5px
}
.light-blue-box-3 {
  padding: 20px 40px;
  height: 0;
  background: #2879BB;
  display:inline-block;
  margin:0 0 0 -4px;
  z-index:999;
}
.arrow-third {
  width: 0;
  height: 0;
  border-left: 20px solid #2879BB;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  display: inline-block;
  margin: 0 0 0 -5px
}

添加此代码并检查

Answer 3

css较少且html较少的更通用的解决方案：http://jsfiddle.net/Z5pTR/1/

支持IE＆lt; 9需要手动注释第一个和最后一个元素，而不是使用first-child;最后添加一个占位符而不是使用:after，最后不使用css3的hsla。