本文已参与「新人创作礼」活动，一起开启掘金创作之路。
效果图
了解cli-path
作用：其能裁剪可视区域 且点击事件触发的区域为裁剪后的可视区域
如何通过cli-path裁剪一个六边形呢
在cli-path中提供了一些形状的取值
| 取值 | 作用 |
|---|---|
| inset() | 定义一个 inset 矩形。 |
| circle() | 定义一个圆形（使用一个半径和一个圆心位置）。 |
| ellipse() | 定义一个椭圆（使用两个半径和一个圆心位置）。 |
| polygon() | 定义一个多边形（使用一个 SVG 填充规则和一组顶点）。 |
| path() | 定义一个任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）。 |
polygon()与path()都能实现六边形
polygon()实现六边形
path()实现六边形
更加详细的内容，查找其他文章
思路
将图片裁剪成六边形
给装图片的容器添加伪元素 一个用于设置外发光 一个用于边框效果
外发光这个部分 通过filter: blur()实现高斯模糊效果 将容器设为圆角 效果比矩形好 再加上旋转的动画 此处待优化（我无法实现 外发光形状是六边形且动态）
边框效果 通过不断改变渐变色的角度实现 但这个方式在ios上是不可行的 因为ios不支持@property
思路二
为了在ios上也能显示 可以使用js控制渐变色角度 但我还是选择通过css实现
新增一个渐变色盒子 使其定位到图片盒子的右上角
将渐变盒子裁剪为六边形
渐变色盒子下添加一个盒子用于定义颜色 以及旋转效果
