使用剪輯路徑在Chrome中的子像素渲染問題

Question

我有一個按鈕，右側有角，我使用剪輯路徑和：僞選擇器後實現。這是如何工作的：

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添加了幾個要點（做一個梯形路徑）。

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>