html - 如何向 CSS 生成的箭头添加框阴影？

Question

我很难在使用边框属性生成的箭头轮廓周围添加框阴影。有没有办法使形状与箭头相同的盒子阴影而不是方形盒子？

这是一个jsfiddle。

HTML：

<a class="bx-prev"></a>
<a class="bx-next"></a>

CSS：

.bx-prev, .bx-next {
  border-right: 15px solid green;
  border-bottom: 15px solid green;
  width: 35px;
  height: 35px;
  top: 200px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
.bx-prev {
  transform: rotate(135deg);
  position: absolute;
  left: 220px;
}
.bx-next {
  transform: rotate(-45deg);
  position: absolute;
  left: 320px;
}

标签： htmlcssborderbox-shadow

Answer 1

试试这个。

编辑！

.bx-prev, .bx-next {
  border-right: 15px solid green;
  border-bottom: 15px solid green;
  width: 35px;
  height: 35px;
  top: 200px;
  -webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
  filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
}
.bx-prev {
  transform: rotate(135deg);
  position: absolute;
  left: 220px;
}
.bx-next {
  transform: rotate(-45deg);
  position: absolute;
  left: 320px;
}

<a class="bx-prev"></a>
<a class="bx-next"></a>