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 。