Jquery 为DIV的上边缘设置动画

我一直在寻找一种解决方案，使用jQuery设置DIV上边缘宽度的动画。我想保持DIV的下边缘（例如，100px 100px）不变，但减小上边缘的宽度。最终形状将为梯形。有人知道如何做到这一点吗？非常感谢您的帮助。

div是块级元素。除非您使用边界半径（即使这样，我也不认为您可以将其设置为梯形）或一些CSS3技巧（并非所有元素都支持），否则您无法像那样更改形状

---

以下是您可以使用的CSS3效果列表：

从adobe获取edge animate（免费）您必须创建一个创意云帐户，然后转到应用程序，这是免费的完整程序

观看一些教程并熟悉界面，那么下面的内容可能更有意义

我做过的一件事（但在较慢的机器上加载需要一段时间）是预渲染出一系列图像，你可以使用photoshop，illustrator，甚至3D软件。。。然后，如果将所有图像加载到边缘，则可以为每个图像设置不透明度动画，并向下或向上缩放时间轴以控制帧速率

下面是一个例子：

---

本例使用了41帧，但是如果要将正方形转换为梯形，可能需要5-10帧（甚至更少）。

事实上，我想到了两种更好、更简单、更聪明的方法来做你想做的事情

下面是一个使用一个div的示例：

第二个解决方案是使用两个div（我认为这里的控制力要大得多）：

---

谢谢你，约翰。我将检查CSS3效果。

#box {
width: 200px;
height: 200px;
background: black;
position: relative;
}
#box:after, #box:before {
display: block;
content:"\0020";
color: transparent;
width: 211px;
height: 45px;
background: white;
position: absolute;
left: 1px;
bottom: -20px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
#box:before {
bottom: auto;
top: -20px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
}

#right {
width: 120px;
height: 200px;
background: black;
position: absolute;
left:130px;
transform:skew(-10deg,0deg);
-ms-transform:skew(-10deg,0deg); /* IE 9 */
-moz-transform:skew(-10deg,0deg); /* Firefox */
-webkit-transform:skew(-10deg,0deg); /* Safari and Chrome */
-o-transform:skew(-10deg,0deg); /* Opera */
}

#left {
width: 120px;
height: 200px;
background: black;
position: absolute;
left:200px;
transform:skew(10deg,0deg);
-ms-transform:skew(10deg,0deg); /* IE 9 */
-moz-transform:skew(10deg,0deg); /* Firefox */
-webkit-transform:skew(10deg,0deg); /* Safari and Chrome */
-o-transform:skew(10deg,0deg); /* Opera */
}