注意:这个问题是关于输出的问题，而不是关于创建任何形状的问题。
我最近创建了一个形状:
.prog {
position: relative;
top: 20px;
width: 150px;
height: 120px;
background: green;
display: inline-block;
transform: skewY(20deg);
transform-origin: 0% 100%;
transition: 0.8s ease;
}
.prog:before {
content: "";
position: absolute;
left: 150px;
width: 150px;
height: 120px;
background: red;
transform: skewY(-40deg);
transform-origin: 0% 100%;
transition: 0.8s ease;
}<div class="prog "></div>在上面的代码段中，绿色形状是
.prog元素，并且是倾斜的。红色形状是第一个元素的:before伪元素。我将
.prog(skewY)倾斜到20deg。现在，我需要将:before设置为-20deg。为此，我首先必须使其倾斜。然后将其进一步倾斜20度。因此，最终的
skewY值为-40deg。我应用了这个，并加上了transform-origin。但是问题是两种形状的最高点都没有对齐。他们应该，但事实并非如此。这是显示问题的图像:
黑线仅供参考。
现在更多!
我偏斜
-20 -20而不是-40:transform: skewY(-20deg) skewY(-20deg); <--可行!transform: skewY(-40deg); <----------------这不! 最佳答案
“未偏斜” child 的行为是正常的，这是偏斜的工作方式。为了理解这一点，我将把问题简化为:
div {
width: 100px; height: 100px;
position:absolute;
top:20px; left:20px;
transform-origin: 0 0;
}
.d1 {
transform: skewX(40deg);
background: red;
opacity:0.7;
}
.d2 {
transform: skewX(20deg) skewX(20deg);
background: blue;
opacity:0.7;
}
/** FOR THE DEMO **/
body {background: url('http://i.stack.imgur.com/GySvQ.png');background-size: 10px;}
.m {text-align:right;padding-top:105px;}
.m1{width:83px;color:red;border-right:1px solid red;}
.m2 {width:72px;color:blue;border-right:1px solid blue;}
p{margin:0 0 5px 150px;color:red;}
.b{color:blue;}<div class="d1"></div>
<div class="d2"></div>
<div class="m m1">x = 83</div>
<div class="m m2"><br/>x = 72</div>
<p class="r">skewX(40deg)</p>
<p class="b">skewX(20deg) skewX(20deg)</p>注意:为便于说明，我将使用
100*100正方形div，并将变换原点设置在该div的左上角。就像上面的代码片段一样。要了解这两个转换之间的区别，我们需要探索CSS skew()函数的工作方式。 The specs说:
因此，这意味着我们可以像这样计算2D X倾斜元素的每个点的坐标:
| 1 tan(α) | . | x |
| 0 1 | | y |
x/y转换前的点的坐标用于偏斜X(40deg)
α = tan(40deg) ~= 0.83
| 1 0.83 | . | 0 | | 83 |
| 0 1 | | 100 | = | 100 |
如代码片段示例所示，新坐标为
x = 83 。对于skewX(20deg)skewX(20deg)
α = tan(20deg) ~= 0.36
第一个偏斜:
| 1 0.36 | . | 0 | | 36 |
| 0 1 | | 100 | = | 100 |
第二偏斜:
| 1 0.36 | . | 36 | | 72 |
| 0 1 | | 100 | = | 100 |
如代码片段所示，新坐标为
x = 72 。结论
两种转换都不会产生相同的结果。因此，
skewY(20deg) skewY(-40deg)与skewY(-20deg)不同，并且红色和绿色元素的两个上角不能对齐为:tan(20deg) != tan(40deg)/2
参考文献: