html - 使用 CSS 创建一个简单的 X，但它没有对齐？

Question

我正在尝试在 CSS 中创建一个简单的类似 X 的十字，只有两个 <div>以 45 度 Angular 相互交叉并在中间相遇。我试图通过创建一个容器来做到这一点 <div>尺寸为 100x100 和两个 child <div> s，每个宽度为 sqrt(100^2 + 100^2)(使用勾股定理)并旋转到 45 度 Angular 。

奇怪的是，至少在 IE 和 Firefox 中，这不会产生“完美”的 X - 线条在右侧明显比在左侧更远。这是有原因的吗？

参见代码笔:http://codepen.io/matthewsot/pen/emJxaG

HTML:

<div class="hamburger">
  <div></div>
  <div></div>
</div>

CSS:

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;
    transform: rotate(45deg);
  }
  .hamburger div:nth-child(2) {
    bottom:0;
    width: @hyp-length;
    transform: rotate(-45deg);
  }

Answer 1

解决方案:

这是由于左边的一些边缘歪斜了中心点造成的。可以通过添加以下内容来修复:

  .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);
  }

你还有什么想做的，还是只是想把它排好？

---

附注或者这里是另一个黑客:

我改变了:

width: @hyp-length;

到

width: @hyp-length - 7;

完整代码:

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 的长度定义。

---

附:最后一个解决方案黑客正在改变:

@burger-width: 100px;

到

@burger-width: 90px;