CSS:连续显示三 Angular 形

Question

我的 HTML 标记和 CSS 可以在这个 link 中看到.在这里，您可以看到带有框的最后一个三 Angular 形看起来不错。实际上，我在这里用盒子做了 3 个三 Angular 形。在每个 box-1-wrap、box-2-wrap 和 box-3-wrap 中，都有一个盒子和一个三 Angular 形。

现在，我想要显示第一个 div 的三 Angular 形。他们在一条线上。所以在这里我希望第一行显示在第二个框的正上方，第二个三 Angular 形应该显示在第三个框的上方。

这里有人可以帮助我吗？

输出文件应该是这样的:

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/