CSS: show triangles in a row

Question

My HTML markup with CSS can be seen in this link . Here, you can see that the last triangle with the box is looking fine. Actually, here I have made 3 triangles with the boxes. In every box-1-wrap, box-2-wrap and in box-3-wrap there is one box and a triangle is made.

Now, I want the triangle of the first div to be shown. They are in a line. So here I want the first row to show just above the second box and the second triangle should be shown above the 3rd box.

Can someone here kindly help me out here?

Here's how the output file should look like:

Answer 1

All you have to do is position each consecutive box under the previous one.

Add this to your 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;
}

Here is a demonstration: 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
}

Add this code and check

Answer 3

A more general solution with less css and less html: http://jsfiddle.net/Z5pTR/1/

Supporting IE <9 would require manually annotating the first and last elements rather than using first-child ; adding one placeholder in the end rather than using :after and finally not using css3's hsla .