我要评论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前端技术
总上所述，本人更喜欢第一种，代码少啊！
应该还有更多的思路，增量补充，欢迎点赞留言！
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论