Search code examples
htmlcssclip-path

Sub-pixel rendering issue in Chrome using clip-path

I have a button with angled corners on the right side, which i achieved using clip-path and the :after pseudo selector. This is how it works:

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>

The problem is with Chrome. Theres a small gap between the button and the right side, see attached screenshot. The gap varies by the size of the button, but you can also replicate it when you simply resize the browser window.

enter image description here

Any ideas how to fix this?

Solution

  • The first thing that springs into my mind, is to make your clip path extend a couple of pixels into the a tag. You could reposition the :after, but I just added a couple of points to you clippath instead (making a trapezoid shaped path).

    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>