1、第一步，双击打开HBuilderX工具，新建一个静态页面，并在主体元素内插入一个div标签，设置这个标签的宽度、高度、背景渐变，如下图所示：
2、第二步，保存代码并打开浏览器，可以看到有个渐变颜色的矩形框，如下图所示：
3、第三步，在第二步的基础上，添加属性clip-path，设置四个像素值，如下图所示：
4、第四步，结果发现没有什么效果，后来查找资料将四个值改为百分比数据，如下图所示：
5、第五步，再次保存并查看页面效果，可以发现矩形变为了菱形，四个直角变了，如下图所示：
6、第六步，分别修改clip-path后面的几个百分比数据，发现图形也跟着改变，如下图所示：
