制作多边形的DIV

Question

如下图，想问下这样多边形的DIV该如何用代码写出来？
用纯代码的方法实现

Answer 1

用 transform: skew() 绘制平行四边形，再使用伪元素或多个Div拼接。Demo：

• A Demo from CodePen

• transform skew - MDN

Answer 2

横着从中间切开，用两个平行四边形拼起来

Answer 3

1. 直接切图png，position方式布局上去；
2. 先写一个白色方形div,然后写两个小三角形，左边背景色，右边白色，拼凑起来；

3. 先写一个白色方形div,左边上边一个小三角形，下边一个小三角形，右边一个大三角形，拼起来。

切图最方便。