具有背景颜色和边框的倾斜元素引入了工件

Question

倾斜具有背景颜色和边框的元素会引入伪影，其中背景颜色在边框下方流血，以在定义的边框外创建非常薄的“鬼边框”。我已经测试过，Chrome和Safari都会发生这种情况。

body {
  padding: 3rem;
}

div {
  height: 10rem;
  transform: skew(-30deg);
  border-left: 10px solid white;
  border-right: 10px solid white;
  background-color: black;
}

<div></div>

如何防止这种情况发生？