Html 当我旋转div（-43）时，firefox上会显示边框线

我想用（-43）旋转这个形状，但在firefox中，线会出现在旋转的div的边缘 这是链接 请帮帮我

以下是简单的HTML：

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

---

我已经使用了“透视”和“轮廓”属性来修复它：

.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;
}

---

这将使文本稍微模糊。

.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;
}