CSS 旋转的 div 边框显示奇怪的轮廓

Question

我正在尝试旋转带有边框的 div。边框的颜色与背景的颜色相同。边框轮廓和背景之间出现一条非常细的线。下面是我的代码。我正在努力摆脱那条奇怪的线。

body {
  background-color: black;
}

div {
  width: 50px;
  height: 50px;
  background-color: white;
  border: 50px solid black;
  transform: rotate(45deg);
}

<div></div>

我尝试了多种浏览器。

我可以通过使用另一个 div 而不是边框​​来解决此问题，但我更感兴趣的是让边框按预期工作。

Answer 1

解决此问题的一个简单方法是使用backface-visibility: hidden.

当一个元素旋转时，似乎渲染transform: rotate()可能会导致它的背面被显示出来，就像在3D透视中一样。

在这种情况下，这可能会导致background-color背面（元素正面的镜像）溢出边框边缘。

backface-visibility: hidden通过使背面不可见来修复它，如下例所示。

顺便说一句，MDN确实提到backface-visibility对 2D 变换没有影响，这表明这种transform: rotate()具有视角的行为比预期更偶然。

例子：

body {
  background-color: black;
  display: flex;
  gap: 100px;
}
div {
  width: 50px;
  height: 50px;
  background-color: white;
  border: 50px solid black;
  transform: rotate(45deg);
}
div + div {
  /*   fixed here */
  backface-visibility: hidden;
}

<div></div>
<div></div>