适合对角线Div在页面上创建完美的X.

Question

我需要一些帮助，将这些对角div设置为页面以创建一个完美的X，然后我可以点击以通过js onclick将X的任一侧带到前景到z-index更改。我已经完成所有这些但我从未处理过对角线div并且似乎无法使它们适合页面正确以形成完美的X而无需滚动条：

.x1 {
  background-color: #2cb5e8;
  opacity: 0.4;
  transform: skewY(-145deg);
  position: absolute;
  overflow: hidden;
  padding: 10% 44%;
  margin: 10% 0% 0% 0%;
  z-index: 1002;
}

.x1>.wrapper {
  -webkit-transform: skewY(145deg);
  -moz-transform: skewY(145eg);
  -ms-transform: skewY(145deg);
  -o-transform: skewY(145deg);
  transform: skewY(145deg);
}

.x2 {
  background-color: #0fb8ad;
  opacity: 0.4;
  transform: skewY(145deg);
  position: absolute;
  overflow: hidden;
  padding: 10% 44%;
  margin: 10% 0% 0% 0%;
  z-index: 1001;
}

.x2>.wrapper {
  -webkit-transform: skewY(145deg);
  -moz-transform: skewY(145deg);
  -ms-transform: skewY(145deg);
  -o-transform: skewY(145deg);
  transform: skewY(145deg);
}

.page {
  min-height: 100%;
  min-width: 100%;
  max-height: 100%;
  max-width: 100%;
}

<div class="page">
  <div class="x1">
    <div class="wrapper">
      <br>
    </div>
  </div>

  <div class="x2">
    <div class="wrapper2">
      <br>
    </div>
  </div>
</div>

Answer 1

因为你正在处理javascript。您可以简单地从容器顶部.page获取盒子的距离，并在.page容器本身添加填充顶部。

获取一个带有类.x1的条形示例栏的尺寸

计算.x1的顶部位置并填充父级以降低其内容

下面的代码段

document.getElementsByClassName("page")[0].style.paddingTop=-(document.getElementsByClassName("x1")[0].getBoundingClientRect().top)+"px";

.x1 {
  background-color: #2cb5e8;
  /*opacity: 0.4;*/
  transform: skewY(-145deg);
  position: absolute;
  overflow: hidden;
  padding: 10% 44%;
  margin: 10% 0% 0% 0%;
  z-index: 1002;
}

.x1>.wrapper {
  -webkit-transform: skewY(145deg);
  -moz-transform: skewY(145eg);
  -ms-transform: skewY(145deg);
  -o-transform: skewY(145deg);
  transform: skewY(145deg);
}

.x2 {
  background-color: #0fb8ad;
  /*opacity: 0.4;*/
  transform: skewY(145deg);
  position: absolute;
  overflow: hidden;
  padding: 10% 44%;
  margin: 10% 0% 0% 0%;
  z-index: 1001;
}

.x2>.wrapper {
  -webkit-transform: skewY(145deg);
  -moz-transform: skewY(145deg);
  -ms-transform: skewY(145deg);
  -o-transform: skewY(145deg);
  transform: skewY(145deg);
}

.page {
  min-height: 100%;
  min-width: 100%;
  max-height: 100%;
  max-width: 100%;
}

<div class="page">
  <div class="x1">
    <div class="wrapper">
      <br>
    </div>
  </div>

  <div class="x2">
    <div class="wrapper2">
      <br>
    </div>
  </div>
</div>