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的边框。有没有办法避免这种情况和＆＃34;停靠＆＃34;影子div的上方是Maindiv，因此它不会移动（即使在动画中更改＆＃39; skew＆＃39;）

提前致谢

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;
}

Demo | Transform Origin - MDN Spec

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

1 个答案: