Clip-Path 多边形工具

CSS 的 clip-path 属性可以将HTML标签元素剪切成任意形状。如果需要生成一个复杂形状，依靠想象来确定锚点的位置多少有些麻烦。如果有个可视化工具，将绘制出的多边形转换为 css 语句就好了。所以我自己写了这样一个网页。



网页模仿了一种早起计算机命令行的风格，用文字代替图形，用键盘操作代替可视化按钮，主要采用黑色和绿色。通过点击中间正方形区域可以创建锚点，当锚点大于等于3个时，可使 clip-path 语句生效，使得正方形被剪切成以锚点为顶点的形状，并且下方的 result 区域会同步生成相应的语句。此外还有锁定移动方向，整体移动和网格等功能。

锚点、网格和一些指示依靠 canvas 完成，而形状为一个 div，通过改变它的 clip-path 属性来生成相应的形状。

网页链接：http://skywingjiang.gitee.io/clippathpolygontool

源码链接：https://gitee.com/skywingjiang/ClipPathPolygonTool.git