实现平行四边形

的要求同题。想了想，旋转、缩放、位移等普通的变换是无法实现的。无奈之下，谷歌和网友提供了两种实现方法。第一种是通过border方法，比较棘手；第二种方法非常有吸引力。除了我上面提到的三种方法，原来的变换，还有一个skew，英文是扭曲的意思，是实现平行四边形的利器。宽度：200px；高度：100px；背景色：蓝色；变换：倾斜（15度，0）；接下来，让我们看看这个偏斜函数是如何工作的。从MDN网站上看到的介绍skew(ax,ay)其中ax是一个代表用来扭曲元素沿横坐标的角度。字面意思是沿x轴变形，即相对于垂直轴变形；同理，ay沿y轴，即相对于x轴变形。还有一句话规定了变形的规则：每个点的坐标修改一个与指定角度和到原点的距离成正比的值；因此，一个点离原点越远，增加的价值就越大。这句话告诉我们，离原点越远坐标变化，这个变化是成正比的。我们了解屏幕坐标系是什么样子的。可以看到原点在左上角，x轴向右延伸，y轴向下延伸。回顾上面的例子变换：skew(15deg,0);第一个参数表示沿x轴的变化，即相对于y轴的变化。这个变化值是15deg，正好是我们画的效果图。让我们看看如何使用上面提到的边框。实现思路是通过两个三角形组合模拟一个平行四边形行，通过边框可以实现矩形。我们先来看看如何实现如图所示的三角形。可以隐藏其他三条边实现一个三角形，可以组成两个三角形。平行四边形三角形的斜率可以通过改变纵横比来实现。