ズーム時に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; 
     } 
    } 

Answer 1

ここで私の解決策は、それらを分割して重なり合わせることです。お楽しみください:)

.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: 0 8px; 
    margin-right: 20px;  
    position: relative; 
    &:before { 
     content: ''; 
     position: absolute; 
     height: 0; 
     width: 0; 
     right: -13px; 
     bottom: 0; 
     border-style: solid; 
     border-width: 0 10px 11px 0; 
     padding-right: 5px; 
     border-color: #ff8a00 transparent #ff8a00 #ff8a00; 
    } 
    &:after { 
     content: ''; 
     position: absolute; 
     height: 0; 
     width: 0; 
     right: -13px; 
     border-style: solid; 
     border-width: 11px 10px 0 0; 
     padding-right: 5px; 
     border-color: #ff8a00 transparent #ff8a00 #ff8a00; 
    } 
}