不正确的边框渲染使用在Firefox

Question

CSS变换时，我有这样一个简单的CSS箭头：

.arrow-brown { 
    height: 18px; 
    width: 18px; 
    border-top: 6px solid #39170b; 
    border-right: 6px solid #39170b; 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

在Firefox的边框不正确地呈现，两条细白线出现翻过边框的宽度。有没有任何解决方法来摆脱它们？

这里所呈现的画面： http://i.imgur.com/TmoAPv6.png

而这里的小提琴： https://jsfiddle.net/w2s9gp8w/

Answer 1

您可以通过box-shadow或者通过给一个尝试绘制的边界linear-gradient

div { 
 
    margin: 20px; 
 
    float: left; 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -webkit-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 
.box-shadow { 
 
    height: 68px; 
 
    width: 68px; 
 
    box-shadow: inset -18px 18px #39170b; 
 
} 
 
.arrow-brown { 
 
    height: 50px; 
 
    width: 50px; 
 
    border-top: 18px solid #39170b; 
 
    border-right: 18px solid #39170b; 
 
} 
 
.gradient { 
 
    height: 68px; 
 
    width: 68px; 
 
    background: linear-gradient(to left, #39170b, #39170b) top right no-repeat, linear-gradient(to top, #39170b, #39170b) top left no-repeat; 
 
    background-size: 18px 100%, 100% 18px; 
 
} 
 
th { 
 
    color:red; 
 
    } 
 
th:last-of-type { 
 
    color:#54A719; 
 
    }

<table> 
 
    <caption>Tests on rotated shapes</caption> 
 
    <thead> 
 
    <tr> 
 
     <th>border</th> 
 
     <th>box-shadow</th> 
 
     <th>linear-gradient</th> 
 
    </tr> 
 
    <thead> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <div class="arrow-brown"></div> 
 
      </td> 
 
      <td> 
 
      <div class="box-shadow"></div> 
 
      </td> 
 
      <td> 
 
      <div class="gradient"></div> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
</table>

http://codepen.io/gcyrillus/pen/GZoKRj