伪类元素 z-index 问题答案

【问题标题】：pseudo class element z-index issue伪类元素 z-index 问题
【发布时间】：2019-06-02 17:19:03
【问题描述】：

在这里，我在 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>

想要这样实现

【问题讨论】：

一种不同的方法可能会更好......如果盒子周围没有背景可以混合...... codepen.io/gc-nomade/pen/QRYyyB

标签： html css

【解决方案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>

【讨论】：