CSS对角线在缩放时有空格

Question

我在容器div上创建了一条对角线：当我缩放一个1px的空白（或可能是一个边距）出现在我的div底部时，显示父div的背景颜色。 我已经面对这个问题好几天没有解决方案了。

您可以在此处查看：https://codepen.io/Sirvasile/pen/GyPapb

div {
  position: relative;
  width: 100%;
  height: 212px;
  background-color: orange;
}

div::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 40px 100vw;
  border-color: transparent transparent white transparent;
}

<div></div>

这是没有缩放的div的屏幕截图。

这是网页缩放时的div截图（> 100％）（使用谷歌浏览器和Safari体验）：

P.S。我已经尝试过使用transform：translateY（1px）但是我不能接受它作为解决方案，因为使用它时div不再是完美的对角线。

Answer 1

我已经处理过类似的问题，虽然不是这个问题，我相信原因最终是一个舍入错误，最终会留下一个备用像素。这是一个浏览器错误，您不会单独使用CSS修复，transform: translateY(1px)可能是上述代码唯一有保障的修复程序。

但是，我们可以通过不同方式创建这种效果来避免这种错误。

div {
    position: relative;
    width: 100%;
    height: 212px;
    background-color: orange;
    -webkit-clip-path: polygon(100% 0, 100% calc(100% - 40px), 0 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% calc(100% - 40px), 0 100%, 0 100%, 0 0);
}

<div></div>

Answer 2

您是否尝试将100%替换为100vw？ 有时，对同一元素使用这两个不同的值可以解析为出现的奇怪滚动。