Chrome 中使用剪辑路径的子像素渲染问题

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，但我只是在您的剪辑路径中添加了几个点（制作梯形路径）。

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>