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

【问题标题】：CSS rotated div border shows odd outlineCSS 旋转的 div 边框显示奇怪的轮廓
【发布时间】：2022-11-29 20:08:42
【问题描述】：

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

body {
  background-color: black;
}

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

&lt;div&gt;&lt;/div&gt;

我尝试了多种浏览器。

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

【问题讨论】：

这很奇怪。我真的很想知道为什么会发生这种情况，而不是简单地解决它（这很容易）
我知道您对此有解决方案，但我增加了赏金以尝试更好地理解它。

标签： css css-transforms

【解决方案1】：

这很有趣，因为它只出现在旋转变换中。您可以使用 outline 将其移除以在带有边框的细线上绘制，这也不会影响它的定位，如下所示：

body {
  background-color: black;
}

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

&lt;div&gt;&lt;/div&gt;

【讨论】：

谢谢你的反应！我不得不将边框更改为 49px 以使我的 div 结束我想要的位置。我仍然希望在没有解决方法的情况下获得对当前行为和工作边界的解释。
这也是我第一次看到它，所以感谢您突出显示它。听起来好像是渲染引擎出了问题。这里有一个解决方案stackoverflow.com/questions/57894977/… 看起来比我的更有效

【解决方案2】：

像下面这样尝试，不需要边框，只需使用边距即可。

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

&lt;div&gt;&lt;/div&gt;

【讨论】：

边距不能有颜色。
1) 你试过这段代码吗，它的输出与 required 相同。 2）在这已经使用背景色
是的，我试过代码。非常感谢您提交！但边界是一个要求