html - 在 Firefox 中变换旋转和边框颜色后的奇怪行为

Question

我从正方形制作三 Angular 形并旋转它，这样我就可以正确地使用阴影。

但不幸的是，我在 Firefox 48.0.2 中的三 Angular 形内遇到了奇怪的空间。

它在 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;
}

这里是 fiddle https://jsfiddle.net/ffnw22ou/1/