css - 如何制作箭头相互重叠的CSS？

Question

我在 CSS 中有两个箭头，其中一个箭头紧挨着另一个，例如 in the JSFiddle .

.firstArrow {
  position: relative;
  background: rgb(0, 82, 48);
  text-align: center;
  margin-right: 20px;
  margin-left: 0px;
  height: 50px;    float: left;
  width: 330px;
}
.firstArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;

  background: linear-gradient(
    to right top,
    rgb(0, 82, 48) 50%,
    transparent 50%
  );
}
.firstArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;

  background: linear-gradient(
    to right bottom,
    rgb(0, 82, 48) 50%,
    transparent 50%
  );
}
.secondArrow {
  position: relative;
  background: rgb(0, 82, 48);
  margin-right: 10px;
    float: left;

  height: 50px;
  width: 330px;
}
.secondArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;
  background: linear-gradient(
    to right top,
    rgb(0, 82, 48) 50%,
    transparent 50%
  );
}
.secondArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient(
    to right bottom,
    rgb(0, 82, 48) 50%,
    transparent 50%
  );
}
.container {
    width: 700px;
    margin: auto;
}

<div class="container">
  <div class="firstArrow"></div>
  <div class="secondArrow"></div>
</div>

我希望它在这张图片上看起来像一个箭头指向下一个箭头。有什么办法吗？

Answer 1

既然元素位置是绝对，为什么不添加一个负值的left，然后指定每个箭头的z-index。 像这样

顺便说一句:更改第二个箭头的颜色以查看第一个箭头的重叠。

.firstArrow {
  position: relative;
  background: rgb(0, 82, 48);
  text-align: center;
  margin-right: 20px;
  margin-left: 0px;
  height: 50px;
  float: left;
  width: 330px;
  z-index: 5;
}

.firstArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;
  background: linear-gradient( to right top, rgb(0, 82, 48) 50%, transparent 50%);
}

.firstArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient( to right bottom, rgb(0, 82, 48) 50%, transparent 50%);
}

.secondArrow {
  position: relative;
  background: rgb(100, 82, 48);
  margin-right: 10px;
  float: left;
  height: 50px;
  width: 330px;
  left: -20px;
  z-index: 2;
}

.secondArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;
  background: linear-gradient( to right top, rgb(0, 82, 48) 50%, transparent 50%);
}

.secondArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient( to right bottom, rgb(0, 82, 48) 50%, transparent 50%);
}

.container {
  width: 700px;
  margin: auto;
}

<div class="container">
  <div class="firstArrow"></div>
  <div class="secondArrow"></div>
</div>