html - 抗锯齿在倾斜导航中造成奇怪的差距

Question

我在创建倾斜导航时遇到了问题，实际上一切都很好，除了导航项链接之间的奇怪间隙。我做了一些研究，我发现这是因为抗锯齿技术。

我尝试使用 ::before 选择器和/或将border-right 属性应用于块来破解它，但没有成功。

有代码：

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  background: #1d1e22;
  overflow: hidden;
}

ul {
  margin-left: 5%;
  position: relative;
}

ul li {
  float: left;
  list-style: none;
}

ul li a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #fff;
  background: #444857;
  transform: skew(-20deg);
  transition: all 300ms ease-in-out;
}

ul li a:hover {
  background: #fff;
  color: #000;
}

ul li a span {
  transform: skew(20deg);
  display: block;
}

<header>
   <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>About us</span></a></li>
    <li><a href="#"><span>Services</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>  
</header>

我希望它没有黑色间隙，只有一个音调。如果您知道如何解决它，如果您分享它，我将不胜感激。

标签： htmlcss

Answer 1

这里的问题是浏览器如何处理亚像素渲染。当您转换形状时，浏览器会在形状边缘应用一些抗锯齿以实现更平滑的渲染。

因此，不能保证两个元素的边缘会完美对齐。请参阅有关它的有趣文章。

最快的解决方法是应用一些负边距，以便形状重叠。

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  background: #1d1e22;
  overflow: hidden;
}

ul {
  margin-left: 5%;
  position: relative;
}

ul li {
  float: left;
  list-style: none;
  margin-left: -2px;
}

ul li a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #fff;
  background: #444857;
  transform: skew(-20deg);
  transition: all 300ms ease-in-out;
}

ul li a:hover {
  background: #fff;
  color: #000;
}

ul li a span {
  transform: skew(20deg);
  display: block;
}

<header>
   <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>About us</span></a></li>
    <li><a href="#"><span>Services</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>  
</header>