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前端技术

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

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