Firefox边框渲染CSS箭头错误

Question

在Firefox中，我遇到了一个问题，即css生成的箭头渲染边框属性，并在中心点处具有切入轮廓。有解决办法吗？

在所有其他不显示边框轮廓并显示清晰箭头的现代浏览器中，它都能完美呈现。

该错误仅在Firefox中可见。

所有其他浏览器（Chrome，Edge，Opera，IE11）：

Firefox：

    .bx-prev, .bx-next {
      border-right: 15px solid green;
      border-bottom: 15px solid green;
      width: 35px;
      height: 35px;
      transition: .25s all;
      cursor: pointer;
      z-index: 10000;
    }
    
    .bx-prev {
      transform: rotate(135deg);
      position: absolute;
      top: 120px;
      left: 220px;
    }
    
    .bx-next {
      transform: rotate(-45deg);
      position: absolute;
      top: 120px;
      right: 420px;
    }

    <a class="bx-prev"></a>
    <a class="bx-next"></a>

Answer 1

将translateZ(1px)与 rotate 属性值一起使用

transform:translateZ(1px) rotate(-45deg)

Answer 2

这似乎是Firefox如何使用matrix属性中的transform值转换元素的方式。

解决此类问题的另一种方法是制作一个svg元素或从fontawesome中获取一个，下载.svg文件。使用https://www.figma.com可以轻松操纵它并掩饰。