CODEWITHSUNDEEP
htmlcss
satish maurya
satish maurya

Reputation: 95

when i rotate div (-43) the border line show on firefox

I want to rotate this shape with (-43) but In firefox, lines appear around the edge of the rotated div this is the link http://jsfiddle.net/satishmaurya/yxy1rwqk/ please help me

Here's the simple HTML:

<div class="rotate">Industry Leader</div>

and here's the CSS:

.rotate{border-bottom: 20px solid #961214;
    border-left: 19px solid transparent;
    border-right: 21px solid transparent;
    height: 0;
    width: 123px;
    transform:  rotate(-43deg) translate(1px);-webkit-transform:  rotate(-43deg) ;-moz-transform: rotate(-43deg) translate(0);-o-transform:  rotate(-43deg) ;-ms-transform: rotate(-43deg); transition:all 0.05s ease-in 0.1s;padding:2px 4px;font-size:12px; font-family:Arial; font-weight:bold; text-align:center;}

Upvotes: 2

Views: 1105

Answers (1)

yakutsa
yakutsa

Reputation: 652

I have used perspective and outline attribute to fix it:

.rotate {
    border-bottom: 20px solid #961214;
    outline: 1px solid !important;
    border-left: 19px solid transparent;
    border-right: 21px solid transparent;
    height: 0;
    width: 123px;
    margin-top:100px;
    color:#fff;
    transform: rotate(-43deg) translate(1px);-webkit-transform:  rotate(-43deg) ;-moz-transform: rotate(-43deg) translate(0) perspective(999px);-o-transform:  rotate(-43deg) ;-ms-transform: rotate(-43deg); transition:all 0.05s ease-in 0.1s;padding:2px 4px;font-size:12px; font-family:Arial; font-weight:bold; text-align:center;
}

Working demo

Upvotes: 2

Related Questions