使用剪辑路径在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>