目标：剪切并拼接成这个样子
最终效果
1、页面结构分析
要实现这个布局，正常放置盒子是不可能实现的，而根据clip-path的特性，剪切过的盒子只显示盒子内的元素，而不会显示盒子外的元素，但是盒子被剪切的那部分是占有位置的，解决这一问题可以通过z-index属性定义这三个盒子的堆叠顺序，使其能够在同一层中得到需要的效果。
2、开始搭建第一部分
html如下：
html
形象一点就是，一个大盒子(div)中包含了三个小盒子(div)
基本布局
①第一个直角梯形的实现
BOX_A
结果
这里推荐一个clip-path生成器，构建梯形使用了四个点，先搭个大概，在进行调整，当你需要使用多个点时，可以使用生成器进行调整。
3、搭建剩下的部分
从这里开始需要对z-index进行部署，将左边黄色区域设为第一层，中间蓝色区域设为第三层，右边红色区域设为第二层，这样做是方便对中间层进行调整。
蓝色区域代码如下
BOX_B
红色区域代码如下
BOX_C
最后在为其添加一点浮动效果
例：
一点浮动效果
最终便完成了这个形状的搭建，其实可以往里面塞很多东西，比如把单纯的颜色换成图片，鼠标放上去时有更多的效果，这些就相对来说比较好实现了。
