使用clip-path在Chrome中出现子像素渲染问题

Question

我在右侧有一个带角度角的按钮，我使用clip-path和：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>