3

我的带有CSS的HTML标记可以在这个链接中看到。在这里，您可以看到最后一个带框的三角形看起来很好。实际上，在这里我用盒子制作了 3 个三角形。在每一个里面都有一个盒子，并制作了一个三角形。box-1-wrap, box-2-wrapbox-3-wrap

现在，我希望显示第一个 div 的三角形。他们排成一行。所以在这里我希望第一行显示在第二个框的上方，第二个三角形应该显示在第三个框的上方。

这里有人可以帮我吗？

以下是输出文件的外观：

在此处输入图像描述

4

3 回答 3

4

您所要做的就是将每个连续的框放在前一个框的下方。

将此添加到您的 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/

于 2012-12-17T12:28:25.763 回答
0 
.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
}

添加此代码并检查

于 2012-12-17T12:25:03.970 回答
0

一个更通用的解决方案，更少的 css 和更少的 html：http: //jsfiddle.net/Z5pTR/1/

支持 IE <9 需要手动注释第一个和最后一个元素，而不是使用first-child; 最后添加一个占位符，而不是使用:after最后不使用 css3 的hsla.

于 2012-12-17T13:16:36.403 回答