jquery - 将一个 DIV 重叠在另外 2 个 DIV 上

Question

我有一些像这样的栏形式的内容:

但我需要指出边缘(或条的末端)。为此，我添加了另一个带有 white 边框的 div。但是，使用这种方法我可以隐藏一个 div 的内容，但其他 div 的内容仍然可见。

我尝试使用 z-index 修复它，但没有成功。

问题:

JS Fiddle setup

附言:

1. 由于浏览器支持不一致，无法使用 clip-path、shape-in​​side、shape-outside。
2. 第三个 div 的内部内容将是透明的。

.parent {
  left: 0.00%;
  width: 100%;
  height: 40px;
  display: block;
}
.child {
  width: 62%;
}
.row1 {
  height: 24px;
  width: 100%;
  display: block;
  opacity: .25;
  background-color: blue;
}
.row2 {
  height: 16px;
  background-color: blue;
  width: 100%;
  display: block;
}
.row3 {
  background-color: red;
  float: right;
  margin: -40px 0 0 0px;
  border-top: 20px solid white;
  border-bottom: 20px solid white;
  border-left: 20px solid transparent;
}

<div class="parent">
  <div class="child">
    <div class="row1">
    </div>
    <div class="row2">
    </div>
    <div class="row3">
    </div>
  </div>
</div>

Answer 1

只需删除这一行，这是不需要的，因为 block 元素会占用所有可用空间:

.row1 {
  width: 100%;
}

然后添加一些边距，以减少可用空间:

.row1 {
  margin-right: 20px;
}

.parent {
  left: 0.00%;
  width: 100%;
  height: 40px;
  display: block;
}
.child {
  width: 62%;
}
.row1 {
  height: 24px;
  margin-right: 20px;
  display: block;
  opacity: .25;
  background-color: blue;
}
.row2 {
  height: 16px;
  background-color: blue;
  width: 100%;
  display: block;
}
.row3 {
  background-color: red;
  float: right;
  margin: -40px 0 0 0px;
  border-top: 20px solid white;
  border-bottom: 20px solid white;
  border-left: 20px solid transparent;
}

<div class="parent">
  <div class="child">
    <div class="row1"></div>
    <div class="row2"></div>
    <div class="row3"></div>
  </div>
</div>