css - CSS 三角形边框使用 :after 伪选择器渲染错误

Question

在 Firefox 和 IE 中，当我使用带有伪选择器的 CSS 边框三角形解决方案时，:after边框看起来会磨损。请参阅此图像进行比较：

这是来自 Chrome 和 Firefox。相关代码如下：

li.active::after {
   content: "";
   width: 0;
   height: 0;
   position: absolute;
   bottom: -8px;
   left: 40%;
   border-style: solid;
   border-width: 8px 10px 0 10px;
   border-color: #FFF200 transparent transparent transparent;
}

Answer 1

该问题是由 Firefox 使用锯齿呈现对角线的方式引起的。最简单的解决方法是简单地稍微改变三角形的形状，使所有边框宽度都相同，然后向上移动以补偿大小的差异。

li.active::after {
   content: "";
   width: 0;
   height: 0;
   position: absolute;
   bottom: -6px;
   left: 40%;
   border-style: solid;
   border-width: 10px 10px 0 10px;
   border-color: #FFF200 transparent transparent transparent;
}

Answer 2

您可以尝试使用以下方法更改透明：

rgba(255,242,0,0)

这对我有用。