Checkerboard CSS模式bug（对角线不美观线）

Question

我使用以下css代码创建了一个棋盘图案：

.testcheckerboard{
  width: 200px;
  height: 100px;

  background-color: white;
  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
}

结果是我想要的棋盘图案，但也显示出一条不美观的对角白线！

奇怪的是，在某些情况下，问题就会消失。

有一种方法可以删除此行吗？ 我认为这只是一个抗锯齿错误，但我找不到控制或删除抗锯齿的方法......

我在互联网上找不到任何解决方案。

Answer 1

问题来自于gra​​diant的轮换（在谷歌控制台中改变45度，看看会发生什么，你会理解）。您可以将25％更改为26％，问题将消失。

.testcheckerboard{
  width: 200px;
  height: 100px;

  background-color: white;
  background-image: linear-gradient(45deg, black 26%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 26%, transparent 25%, transparent 75%, black 75%);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
}

<div class="testcheckerboard" >

</div>

Answer 2

我通过在css中使用inline-svg找到了一种解决方法。

适用于所有Windows浏览器和Android浏览器，但我不安全，这适用于OSX（MAC）。

.testcheckerboard{
  width: 200px;
  height: 100px;
  background-size: 40px 40px;

  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(0,0,0)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E");
}

<div class="testcheckerboard"></div>