在我们的前端开发中，总会遇到各种各样的需求，比如这个平行四边形的实现，对于这个实现的方式有很多，接下来就给大家说一下我经常使用的一种方式。
工具/原料
前端开发工具
方法/步骤
1
其实平行四边形的实现方式没有我们想象的那么复杂，不仅不复杂实际上实现起来非常简单，只需要是借助transform的一个属性skew，就可以轻松的实现我们想要的结果。
2
在这里我就直接写style了，实现的具体代码如下：display: inline-block; padding: 50px 100px; border: 1px solid #44a5fc; color: #333; transform: skew(-20deg);
3
下面看一下我们的结果，乍一看似乎实现了但是，仔细一看我们会发现有一点小小的bug，就是我们的字体也发上偏转了。
4
其实只要外部的样式出来以后，里面的问题就好解决的多。对于字体的偏转我们可以让字体偏转回来即可。
5
具体的代码实现如下：.bd { display: inline-block; padding: 50px 100px; border: 1px solid #44a5fc; color: #333; transform: skew(-20deg); } .bd div { font-size:140px ; transform: skew(20deg); }
6
最后我们在运行一下可以看出，我们的平行四边形基本上算是实现了剩下的就是进行一下微调，得到我们想要的样式就可以了。
注意事项
希望大家勇于分享，一起进步哟
上一篇：怎样认识CAXA电子版图
下一篇：宝宝学剪纸之春色满园怎么剪