如何将倾斜的div停靠在上面的div上？

Question

我试图将div添加到另一个div,以便它的上边框在倾斜时不会移动.

Html代码:

 <div class="Container">
      <div class="Main"> </div>
      <div class="Shadow"></div>
 </div>

Css代码:

.Shadow
{
    height:70px;
    width:30px;
    transform:skew(20deg);
    background-color:lightgray;
}
.Container {
    display:inline-block;
}
.Main
{
    width:30px;
    height:100px;
    background-color:green;
}
}

Demofiddle

以下移动阴影div的边界.有没有办法避免这种情况并将阴影div的上侧"停靠"到Maindiv,这样它就不会移动(即使在动画中改变'skew')？

提前致谢

Answer 1

是的,你可以通过使用该transform-origin属性来做到这一点.只需将其设置如下,它将确保阴影div的顶部始终停靠在主div的底部.

.Shadow {
    height:70px;
    width:30px;
    -webkit-transform:skew(20deg);
    -moz-transform:skew(20deg);
    transform:skew(20deg);
    -webkit-transform-origin: left top; /* add this setting */
    -moz-transform-origin: left top; /* add this setting */
    transform-origin: left top; /* add this setting */
    background-color:lightgray;
}

演示 | 转换起源 - MDN Spec