Firefox 边框渲染 css 箭头错误

Question

在 Firefox 中，我遇到了一个问题，即 css 生成的箭头在中心点呈现带有 cut-through 轮廓的边框属性。有解决办法吗？

它在边框轮廓不可见并显示清晰箭头的所有其他现代浏览器中呈现得非常好。

该错误仅在 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

这似乎是，Firefox 如何使用 transform 属性中的 matrix 值翻译元素。

另一种解决此类问题的方法是制作一个 svg 元素或从 fontawesome, download the .svg file. Using https://www.figma.com 获取一个元素，以便轻松地操作它，瞧。

Answer 2

使用 translateZ(1px) 和旋转属性值

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

Firefox 边框渲染 css 箭头错误

Firefox border rendering css arrow bug

html

css

firefox

border