在firefox中转换旋转和边框颜色后的奇怪行为

Question

我从正方形制作三角形并旋转它以便我可以正确地使用阴影。

但遗憾的是我在Firefox 48.0.2中遇到了三角形中的奇怪空间。

它在Chrome和IE中运行良好。

也许有人对此有所了解？ 为什么会这样？ 有谁知道如何解决这个问题？

感谢您的回答。

.item:after{
position: absolute;
content: "";
border: 39px solid black;
border-color: transparent transparent black black;
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.2);
transform: rotate(-135deg);
left:100px;
top:100px;
}

有一个例子： https://jsfiddle.net/uqoh3o9s/11/

Answer 1

为什么需要旋转呢？

.item:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 86.6px;
  border-color: transparent transparent transparent #000000;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  left:100px;
  top:100px;
}

这里是小提琴https://jsfiddle.net/ffnw22ou/1/