Gap between border-image after using transform: rotate in firefox


I have tried to create a triangle without background at that time faced above issue

html code
<div>&nbsp;</ div>
css code

div {
margin: 20px;
width: 250px;
height: 250px;
border-top: 20px solid #4c66a1;
border-left: 20px solid #4c66a1;
transform: rotate(-40deg);
left:400px;
margin-left:50px;
margin-top:100px;
}

Preview

part1

To fix above issue use perspective


div {
margin: 20px;
width: 250px;
height: 250px;
border-top: 20px solid #4c66a1;
border-left: 20px solid #4c66a1;
transform:perspective(999px) rotate(-40deg);
left:400px;
margin-left:150px;
margin-top:100px;
}

Preview

part1

Advertisements
Posted in Css