伪类元素z-index问题

Question

在这里，我使用的伪类元素在div边框白色之前彼此重叠，我想给颜色提供不透明性，例如箭头颜色。我尝试使用颜色::: before而不是白色，但是具有不透明性，它不起作用。谁能建议白色与箭头颜色的变化方式相同，我想剪切图像并在背景中显示箭头。

.box {
  position: relative;
  width: 200px;
  height: auto;
  padding: 100px;
}

.box:before {
  content: '';
  position: absolute;
  bottom: 102px;
  right: -86px;
  border-top: 80px solid transparent;
  border-right: 80px solid #fff;
  width: 0;
  z-index: 1;
}

.box::after {
  border-style: solid;
  border-width: 5em 5em 0 0;
  content: '';
  display: block;
  top: 91px;
  height: 8em;
  left: 185px;
  transform: rotate(-135deg);
  width: 8em;
  position: absolute;
  z-index: -1;
  color: rgba(255, 0, 0, 0.3);
}

<div class="box">
  <img src="https://thumb.ibb.co/gdi10F/slide11.jpg" class="iva-img" alt="slide11" border="0">

</div>
<span class="chevron left"></span>

想要这样实现

Answer 1

您可以使用剪切路径剪切图像并简化箭头代码，如下所示：

.box {
  position: relative;
  margin: 4em;
  z-index:0;
  display:inline-block;
}
img {
  display:block;
  margin:1em;
  clip-path:polygon(0 0,100% 0, 100% calc(100% - 5em), calc(100% - 5em) 100%,0 100%);
}

.box::after {
  border-style: solid;
  border-width: 5em  0 0 5em;
  content: '';
  top: 0;
  height: 100%;
  left: 0;
  width: 100%;
  position: absolute;
  z-index: -1;
  color: rgba(255, 0, 0, 0.3);    
  transform: translateX(6em) rotate(-45deg);
  box-sizing:border-box;
}

<div class="box">
  <img src="https://thumb.ibb.co/gdi10F/slide11.jpg" class="iva-img" alt="slide11" border="0">
</div>