html - 伪类元素 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

可以使用clip-path来剪切图片，简化箭头的代码如下:

.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>