html - Firefox 边框渲染 css 箭头错误

Question

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

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

该错误仅在 Firefox 中可见。

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

火狐：

    .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>

标签： htmlcssfirefoxborder

Answer 1

translateZ(1px)与旋转属性值一起使用

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