Проблема субпиксельного рендеринга в Chrome с использованием clip-path

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>