时间戳

首页 > 解决方案 > 全宽的 SkewX() 数学公式（彼此相邻的 3 个 div）

html - 全宽的 SkewX() 数学公式（彼此相邻的 3 个 div）

问题描述

.parent {
  height: 500px;
  width: 500px;
  position: relative;
  background: black;
}

.test {
  transform: skewX(20deg);
  width: 33%;
  height: 100%;
  position: absolute;
}

.a {
  background: purple;
  left: 0;
}

.b {
  background: green;
  left: 33%;
}

.c {
  background: orange;
  left: 66%;
}
<div class="parent">
  <div class="test a"></div>
  <div class="test b"></div>
  <div class="test c"></div>
</div>

jsfiddle：http: //jsfiddle.net/jksqc1ux/7/

如您所见，由于倾斜，您仍然可以看到父母的背景。所有 3 个 div 都相等，它会是什么公式才能填充 100% 的父级（所以你再也看不到代码片段中的黑色）？父维度可以有不同的值。

我正在寻找类似.a {left: calc(33% *0.4)}或类似的东西？

标签： htmlcsscss-transformsskew

解决方案

首先，调整transform-origin以bottom left使其更容易，您将获得下图所示的结果。

然后，您需要按数量调整 width 和 left 属性X以覆盖整个区域。要计算X，您需要使用公式：tan(deg) = X / height( X = height * tan(deg)) 其中deg是用于倾斜的度数，height是父元素的高度。由于您有 3 个元素，因此需要在它们之间拆分此数量以始终保持相同的宽度。

在此处输入图像描述

我添加了一些不透明度，以便您可以看到所有元素都适合父容器的宽度：

.parent {
  height:500px;
  width:500px;
  margin:auto;
  position:relative;
  background:black;
}
.test {
  transform: skewX(20deg);
  --X:calc(0.364 * 500px); /*tan(20deg) ~ 0.364*/
  transform-origin:bottom left;
  width:calc(calc(100%/3) + calc(var(--X)/3));
  height:100%;
  position:absolute;
  opacity:0.8;
}
.a {
    background:purple;
    left:0;
}
.b {
  background:green;
  left:calc(calc(100%/3) + calc(var(--X)/3));

}
.c {
  background:orange;
  left:calc(calc(2*100%/3) + calc(2 * var(--X)/3));
}
<div class="parent">
  <div class="test a">

  </div>
  <div class="test b">

  </div>
  <div class="test c">

  </div>
</div>

用更少的代码获得类似效果的另一种方法是使用渐变：

.parent {
  height:500px;
  width:500px;
  margin:auto;
  position:relative;
  background:
  linear-gradient(70deg, purple 0,purple 33%, green 33%, green 66%,orange 66%,orange 100%);
}
<div class="parent">

</div>

推荐阅读