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。按钮和右侧之间有一个小间隙，请参见随附的屏幕截图。差距因按钮的大小而异，但您也可以在调整浏览器大小时复制它window。

有什么解决办法吗？

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>

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

Sub-pixel rendering issue in Chrome using clip-path

html

css

clip-path