全宽的 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/

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

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

Answer 1

试一试，它必须适合所有尺码:(参见fiddle: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>

Answer 2

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

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

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

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

SkewX() math formula for full width (3 divs next to each other)

html

css

css-transforms

skew