Question

我试图在CSS中创建一个简单的类似X的十字架，只有两个<div>以45度角相互交叉并在中间相遇。我尝试通过创建尺寸为100x100且两个子<div> s的容器<div>来尝试这样做，每个容器的宽度为sqrt（100 ^ 2 + 100 ^ 2）（使用毕达哥拉斯定理）并旋转到45度角。

奇怪的是，至少在IE和Firefox中，这并不会导致完美的＆＃34; X - 右侧的线条明显比左侧的线条明显更远。有这个原因吗？

请参阅Codepen：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);
  }

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

P.S。另外，这是另一个黑客：

我改变了：

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

p.s.s。最后一个解决方案正在改变：

@burger-width: 100px;

到

@burger-width: 90px;

使用CSS创建一个简单的X，但它没有排队？

1 个答案: