如何为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;
}

- TheAmazingKnight

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>

- PTA

---

我喜欢这个！这很接近，但如果可能的话，我想围绕整个箭头，不仅仅是前面，还要包括后面。 - TheAmazingKnight

Answer 2

你可以通过使用伪元素创建相同的箭头来尝试模糊滤镜：

.bx-prev,
.bx-next {
  top: 200px;
  position:relative;
}

.bx-prev {
  transform: rotate(135deg);
  position: absolute;
  left: 220px;
}

.bx-next {
  transform: rotate(-45deg);
  position: absolute;
  left: 320px;
}
/*the arrow*/
.bx-prev:before,
.bx-next:before,
.bx-prev:after,
.bx-next:after{
  content:"";
  position:absolute;
  border-right: 15px solid green;
  border-bottom: 15px solid green;
  width: 35px;
  height: 35px;
}
/*the shadow*/
.bx-prev:after,
.bx-next:after{
  border-color: red;
  z-index:-1;
  filter:blur(5px);
}

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

- Temani Afif

---

这正是我想要的效果。虽然filter:blur()支持的浏览器并不多，但希望未来会有更多的支持。谢谢！ - TheAmazingKnight

@TheAmazingKnight 这个滤镜实际上得到了很好的支持，你可以在这个链接中查看支持情况：https://caniuse.com/#feat=css-filters。只有IE不支持，这并不令人意外。 - Temani Afif

我注意到在Firefox中，箭头的边框渲染在中心点处有一个切割轮廓的错误。这个问题有解决方法吗？请查看更新后的jsfiddle https://jsfiddle.net/TheAmazingKnight/1cs2u798/，你就会知道我的意思了。 - TheAmazingKnight

@TheAmazingKnight 试试这个方法：https://jsfiddle.net/uf6m7k2e/ 你不会再遇到这个问题了。 - Temani Afif

谢谢提供替代方案。我从另一个stackoverflow问题中得到了一个简单的修复方法，为Firefox添加了translateZ属性：transform: translatez(1px) rotate(45deg); - TheAmazingKnight