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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s