Html 用CSS创建一个简单的X，但它没有'；你不排队吗？ 我试图在CSS中创建一个简单的X形交叉，只有两个 S以45度角交叉并在中间相遇。我试图通过创建一个尺寸为100x100的容器和两个子容器来实现这一点，每个容器的宽度为sqrt（100^2+100^2）（使用毕达哥拉斯定理）并旋转到45度角

奇怪的是，至少在IE和Firefox中，这并没有产生一个“完美的”X——右边的线条明显比左边的要远。这有什么原因吗

见代码笔：

HTML:

解决方案：

这是因为左边的边距偏离了中心点。可以通过添加以下内容来修复此问题：

  .hamburger div {
       margin: -2.5px;

这似乎有效，因为似乎存在继承的属性：

  -webkit-transform-origin: 0px 2.5px;

因此，通过强制边距返回

-2.5px

，您绕过了继承的原点

---

---

在找到解决方案之前进行了黑客攻击：

我做了一点小改动来排列它；我所做的只是改变了这一行：

@hyp-length: sqrt(pow(@burger-height, 2) + pow(@burger-width, 2));

为此：

  @hyp-length: sqrt(pow(@burger-height, 1.95) + pow(@burger-width, 2));

因此，完整代码：

body {
  background-color: black;
}

@burger-height: 100px;
@burger-width: 100px;
.hamburger {
  position: relative;
  height: @burger-height;
  width: @burger-width;
}
  .hamburger div {
    position: absolute;
    width: 100%;
    height: 5px;

    background-color: #fff;
    transform-origin: left center;
  }

  @hyp-length: sqrt(pow(@burger-height, 1.95) + pow(@burger-width, 2));
  .hamburger div:nth-child(1) {
    top: 0;
    width: @hyp-length;
    transform: rotate(45deg);
  }
  .hamburger div:nth-child(2) {
    bottom:0;
    width: @hyp-length;
    transform: rotate(-45deg);
  }

body {
  background-color: black;
}

@burger-height: 100px;
@burger-width: 100px;
.hamburger {
  position: relative;
  height: @burger-height;
  width: @burger-width;
}
  .hamburger div {
    position: absolute;
    width: 100%;
    height: 5px;

    background-color: #fff;
    transform-origin: left center;
  }

  @hyp-length: sqrt(pow(@burger-height, 2) + pow(@burger-width, 2));

  .hamburger div:nth-child(1) {
    top: 0;
    width: @hyp-length - 7;
    transform: rotate(45deg);
  }
  .hamburger div:nth-child(2) {
    bottom:0;
    width: @hyp-length - 7;
    transform: rotate(-45deg);
  }

你还想做些什么，还是只是想把它排成一行

---

p、 另一种方法是：

我改变了：

width: @hyp-length;

到

因此，完整代码：

body {
  background-color: black;
}

@burger-height: 100px;
@burger-width: 100px;
.hamburger {
  position: relative;
  height: @burger-height;
  width: @burger-width;
}
  .hamburger div {
    position: absolute;
    width: 100%;
    height: 5px;

    background-color: #fff;
    transform-origin: left center;
  }

  @hyp-length: sqrt(pow(@burger-height, 1.95) + pow(@burger-width, 2));
  .hamburger div:nth-child(1) {
    top: 0;
    width: @hyp-length;
    transform: rotate(45deg);
  }
  .hamburger div:nth-child(2) {
    bottom:0;
    width: @hyp-length;
    transform: rotate(-45deg);
  }

body {
  background-color: black;
}

@burger-height: 100px;
@burger-width: 100px;
.hamburger {
  position: relative;
  height: @burger-height;
  width: @burger-width;
}
  .hamburger div {
    position: absolute;
    width: 100%;
    height: 5px;

    background-color: #fff;
    transform-origin: left center;
  }

  @hyp-length: sqrt(pow(@burger-height, 2) + pow(@burger-width, 2));

  .hamburger div:nth-child(1) {
    top: 0;
    width: @hyp-length - 7;
    transform: rotate(45deg);
  }
  .hamburger div:nth-child(2) {
    bottom:0;
    width: @hyp-length - 7;
    transform: rotate(-45deg);
  }

这里的问题似乎是直线比横截面长。行由代码中的

@hyp length

长度定义

---

p、 美国最后一个解决方案黑客正在改变：

@burger-width: 100px;

到

---

这似乎解决了问题，但你知道为什么吗？从数学上讲，这些线不应该按原样正确排列吗？我又添加了两个解，但似乎与您在

@hyp length

中使用的平方根有关。因为你用的是平方根，所以它变成了一个无理数，它会使长度偏离逻辑上看起来的长度。是的，看起来“边距”来自于div的高度，非常感谢：你应该使用下面的一个答案，但是关于他们为什么不排队的原因，答案是线比包含的div长，所以底部：0将被关闭，类似于Top。我认为问题是边界的厚度。如果您尝试将边框减少到1px，则X是正确的。也许，你应该调整旋转来考虑它。

@burger-width: 100px;

@burger-width: 90px;