缩放时，CSS角度边框额外像素

Question

我正在使用:after选择器在div上创建一个有角度的边框。它看起来很好，直到你放大到125％或175％，此时角度部分有一个丢失的像素。据我所知，这是因为浏览器无法准确地舍入像素宽度。

我知道如何才能让这些与CSS / SCSS对齐吗？感谢

100％看起来不错

125％未对齐边框

https://jsfiddle.net/barryman9000/qqywvynx/

<div class="flag">Tester</div>

    .flag {
        font-size: 12px;
        color: #fff;
        font-weight: normal;
        background-color: #ff8a00;
        line-height: 20px;
        position: relative;
        text-align: center;
        margin-bottom: 15px;
        display: inline-block;
        padding-left: 8px;
        margin-right: 20px;    

        &:after {
            content: '';
            position: absolute;
            height: 0;
            width: 0;
            border-style: solid;
            border-width: 10px 10px 10px 0;
            padding-right: 4px;
            border-color: #ff8a00 transparent #ff8a00 #ff8a00;
        }
    }