CODEWITHSUNDEEP
htmlcss
Victor Eliot
Victor Eliot

Reputation: 87

Weird 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.

.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/

enter image description here

Upvotes: 4

Views: 387

Answers (1)

mchev
mchev

Reputation: 725

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 the fiddle https://jsfiddle.net/ffnw22ou/1/

Upvotes: 3

Related Questions