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

Question

.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% 的父级（所以你不能再在 sn-p 代码中看到黑色）？父维度可以有不同的值。

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

Answer 1

首先，将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>

Answer 2

根据谷歌，数学表示 44% 的宽度，https://www.google.com/search?q=(33%25+%2B+sin(20degrees)*33%25) 但如果将其应用于左右偏移，这些值会导致中心区域看起来更大。

Calc 不支持混合单位，因此需要预先计算。

.parent {
  height:500px;
  width:500px;
  position:relative;
  background:green;
  overflow:hidden;
}

.parent::before {
  content:'';
  background:purple;
  height:500px;
  width:44%; /* (33% + sin(20 degrees)*33%) = 44% */ 
  transform: skewX(20deg);
  position:absolute;
  left:-18%;
}
.parent::after {
  content:'';
  height:500px;
  width:44%;
  transform: skewX(20deg);
  position:absolute;
  background:orange;
  right:-18%;
}

<div class="parent">


</div>

Answer 3

试试吧，它必须适合所有尺寸：（见小提琴：http://jsfiddle.net/jksqc1ux/85/）

.parent {
  height:500px;
  width:500px;
  position:relative;
  background:black;
  overflow:hidden;
}
.test {
  transform: skewX(20deg);
  width:50%;
  height:100%;
  position:absolute;
}
.a {
    background:purple;
        right: 75%;
}
.b {
  background:green;
      right: 25%;

}
.c {
  background:orange;
      left: 75%;
}

<div class="parent">
  <div class="test a">

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

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

  </div>
</div>