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

当我旋转div（-43）在Firefox上显示边框线

1 个答案: