Question

当我旋转::after的边框时，我遇到了一些问题：在边框的角落，我看到了白线。这是我的HTML：

<a class="tt__list__tabs__singleTab__backLink tt__list__tabs__wrap__links tt__list__tabs--innerTab__link" href="#tt__list__tabs__wrap--outerTabs" style="display: flex;">
    <span class="tt__list__singleTab__headline">Back</span>
 </a>

这是我的CSS：

.tt__list__tabs__wrap__links{
    background:transparent;
 }

.tt__list__tabs__wrap__links::after {
    background:transparent;
    border-top: 5px solid black;
    border-right: 5px solid black;
    content: '';
    display: inline-block;
    height: 0.75em;
    transform: rotate(45deg);
    width: 0.75em;
}

Here is the jsfiddle输出。

我使用Win10，浏览器是最新的Firefox。图片：http://imgur.com/a/kGNeX

我已经尝试了透明背景的技巧。我错过了什么吗？有什么想法吗？

Answer 1

我找到了Firefox错误的答案：

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

不再有白线了。

更新了jsFiddle：https://jsfiddle.net/hy7vhprf/2/

Firefox：旋转边框时为白线

1 个答案: