CSS绘制平行四边形实例教学

css绘制平行四边形

(1)、父元素transform: skewx(-45deg);子元素transform: skewx(45deg);

效果图1：

react前端技术

(2)、将平行四边形的样式放置于“伪元素”样式中，还是采用transform: skewx(-45deg);

效果图2：

vue前端技术

(3)、先画矩形，再与两头的三角形进行拼接，两个三角形用到的也是"伪元素";

我们先来了解下border绘制宽度和高度为0，border-width有一定宽度的图形，看图说话

border-color: red yellow blue green; //分别为上边框、右边框、下边框、左边框的颜色

效果图3：

 

那么绘制平行四边形呢？

思路：先画中间的矩形，再用绝对定位绘制两头的三角形，每一个三角形都是由两个小三角形组成的，而其中的小三角形就是上述所说的width、height为0，设置border宽度所绘制，思路懂了吗？看代码，看效果图：

效果图4：

图中采取红、绿、蓝三种颜色，以示区分。自己做项目可改成同一种颜色。

angular前端技术

总上所述，本人更喜欢第一种，代码少啊！

应该还有更多的思路，增量补充，欢迎点赞留言！