Strange behavior after transforming rotation and border color in firefox

Question

I made a triangle out of a square and rotated it so that I can use the shadows correctly.

But, unfortunately, I came across strange spaces inside my triangle in Firefox 48.0.2.

It works great in Chrome and IE.

Maybe someone has experience? Why did this happen? Does anyone know how to fix this?

Thank you for your responses.

.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;
}

There is an example: https://jsfiddle.net/uqoh3o9s/11/

Answer 1

Why do you need to rotate it?

.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;
}

Here's the script https://jsfiddle.net/ffnw22ou/1/