html - 当我旋转 div (-43) 时，边界线显示在 firefox 上

Question

我想用 (-43) 旋转这个形状，但是在 firefox 中，线条出现在旋转的 div 的边缘周围这是链接http://jsfiddle.net/satishmaurya/yxy1rwqk/请帮助我

这是简单的 HTML:

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

这是 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;}

Answer 1

我已经使用 perspective 和 outline 属性来修复它:

.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