クリップパスを使用したクロムのサブピクセルレンダリングの問題

Question

右側に角が付いたボタンがあります。これはクリップパスと：after擬似セレクタを使って実現しました。これは、それがどのように動作するかです：

a { 
 
    height:40px; 
 
    line-height:40px; 
 
    color:#fff; 
 
    background:red; 
 
    display:inline-block; 
 
    padding:0 10px; 
 
    position:relative; 
 
} 
 

 
a:after { 
 
    background: red; 
 
    bottom: 0px; 
 
    -webkit-clip-path: polygon(0% 0%, 5px 5px, 5px 35px, 0px 100%); 
 
    clip-path: polygon(0% 0%, 5px 5px, 5px 35px, 0px 100%); 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: -5px; 
 
    top: 0px; 
 
    width: 5px; 
 
}

<a>test123</a>

問題がChromeです。ボタンと右側の間に小さな隙間があります。添付の​​スクリーンショットを参照してください。このギャップはボタンのサイズによって異なりますが、ブラウザウインドウのサイズを変更するだけでギャップを複製することもできます。

この問題を解決するためにどのように任意のアイデア？

Answer 1

最初に私の心に浮かぶのは、クリップパスをいくつかのピクセルをaタグに拡張することです。 :afterの位置を変えることができますが、私はちょうどあなたにclippathの代わりに2点を追加しました（台形の道を作る）。

a { 
 
    height:40px; 
 
    line-height:40px; 
 
    color:#fff; 
 
    background:red; 
 
    display:inline-block; 
 
    padding:0 10px; 
 
    position:relative; 
 
} 
 

 
a:after { 
 
    background: red; 
 
    bottom: 0px; 
 
    -webkit-clip-path: polygon(-2px 0%, 0% 0%, 5px 5px, 5px 35px, 0px 100%, -2px 100%); 
 
    clip-path: polygon(-2px 0%, 0% 0%, 5px 5px, 5px 35px, 0px 100%, -2px 100%); 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    right: -5px; 
 
    top: 0px; 
 
    width: 5px; 
 
}

<a>test123</a>