CSS：连续显示三角形

Question

我可以在此链接中看到我的CSS HTML标记。 在这里，您可以看到带框的最后一个三角形看起来很好。 实际上，这里我用盒子制作了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 <9将需要手动注释第一个和最后一个元素而不是使用first-child ; 最后添加一个占位符而不是使用:after并且最后不使用css3的hsla 。