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/