Html 全宽的SkewX（）数学公式（三个div相邻）

.parent{
高度：500px；
宽度：500px；
位置：相对位置；
背景：黑色；
}
.测试{
变换：skewX（20度）；
宽度：33%；
身高：100%；
位置：绝对位置；
}
.a{
背景：紫色；
左：0；
}
.b{
背景：绿色；
左：33%；
}
c{
背景：橙色；
左：66%；
}

---

试试吧，它必须适合所有尺寸：（请参阅fiddle:）

.parent{
高度：500px；
宽度：500px；
位置：相对位置；
背景：黑色；
溢出：隐藏；
}
.测试{
变换：skewX（20度）；
宽度：50%；
身高：100%；
位置：绝对位置；
}
.a{
背景：紫色；
右：75%；
}
.b{
背景：绿色；
右：25%；
}
c{
背景：橙色；
左：75%；
}

---

根据谷歌的数学计算，宽度为44%，度数为33%*25），但如果将这些值应用于左偏移和右偏移，则会导致中心区域看起来更大

Calc不支持混合单位，因此预计算看起来是一项要求

.parent{
高度：500px；
宽度：500px；
位置：相对位置；
背景：绿色；
溢出：隐藏；
}
.parent：：之前{
内容：''；
背景：紫色；
高度：500px；
宽度：44%；/*（33%+sin（20度）*33%）=44%*/
变换：skewX（20度）；
位置：绝对位置；
左-18%；
}
.parent：：之后{
内容：''；
高度：500px；
宽度：44%；
变换：skewX（20度）；
位置：绝对位置；
背景：橙色；
右图：-18%；
}

---

首先，将

变换原点

调整为

左下

，使其更容易操作，您将获得下图所示的结果

然后，您需要按数量

X

调整宽度和左侧属性，以覆盖整个区域。要计算

X

您需要使用以下公式：

tan（deg）=X/height

（

X=height*tan（deg）

），其中

deg

是用于倾斜的度数，

height

是父元素的高度。由于您有3个元素，因此需要在它们之间拆分此数量，以始终保持相同的宽度

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

.parent{
高度：500px；
宽度：500px；
保证金：自动；
位置：相对位置；
背景：黑色；
}
.测试{
变换：skewX（20度）；
--X:calc（0.364*500px）；/*tan（20度）~0.364*/
变换原点：左下角；
宽度：calc（calc（100%/3）+calc（var（--X）/3））；
身高：100%；
位置：绝对位置；
不透明度：0.8；
}
.a{
背景：紫色；
左：0；
}
.b{
背景：绿色；
左：calc（calc（100%/3）+calc（var（--X）/3））；
}
c{
背景：橙色；
左：计算量（计算量（2*100%/3）+计算量（2*var（--X）/3））；
}

也许要计算宽度，但你还是要计算左侧。如果每个部分的宽度都更大，可以吗？只需将它们设置为100%宽度，然后在父屏幕上隐藏溢出，就很简单了，但它应该可以在非常大的屏幕上工作，就像街道上的屏幕一样。因此，在某些情况下，即使是1000%的宽度也不足以克服倾斜。你的意思是：谢谢，但你可以看到紫色比黄色小得多：左上角vs右下角。所有3个div必须相等。当safari支持剪辑路径：多边形时，可以通过变量中的单位值计算点？什么是

--X:calc（0.364*500px）？它是有效的css吗？@ClaudiuCreanga当然；）这些是CSS变量，它们在您的案例中很有用[更新我的答案，并提供更好的解释。谢谢。这里是500px--X:calc（0.364*500px）是高度，对于整页高度，我可以将其更改为100vh。太棒了。我不明白为什么它会这么复杂。@ClaudiuCreanga它不复杂，它是数学：）@ClaudiuCreanga我添加了另一种方法来避免数学复杂性，如果你想的话；）