Incorrect border rendering when using css transform in Firefox

Question

I have a simple CSS arrow like this:

.arrow-brown {
    height: 18px;
    width: 18px;
    border-top: 6px solid #39170b;
    border-right: 6px solid #39170b         


        

Answer 1

you can give a try to draw the borders via box-shadow or via 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;
  }

  
Tests on rotated shapes
  

    

      
border
      
box-shadow
      
linear-gradient
    
    

      

        

          

            

          
          

            

          
          

            

          
        
      

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