Lezhnev Victor Lezhnev Victor - 1 year ago 66
CSS Question

Wierd behavior after transform rotate and border color in firefox

I made triangle from square and rotate it so I could use shadows rightly.

But unfortunately I faced with strange spaces inside my triangle in Firefox 48.0.2.

It works perfect in Chrome and IE.

Maybe someone has an expirience with that ?
Why it does happened ?
Does anyone know how to fix that ?

Thank you for your answers.

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);

There is an example:

enter image description here

Answer Source

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));

Here the fiddle https://jsfiddle.net/ffnw22ou/1/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download