如何利用clip-path中的path()绘制自己的姓css中的clip-path ：属性使用裁剪方式创建元素的可显示

今天给各位介绍个有趣的“玩具”，clip-path：path()

css中的clip-path ：属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

简单来讲这个属性就可以让你实现任意的形状，其中path()就是自定义任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）请看下图。

SVG 填充规则(最主要的规则，其他感兴趣阔以自行搜索)：

原点（0,0）位于 SVG’ 画布的左上角

SVG 路径定义：

移动到起始点（Move To）：M 或 m
- M x y：绝对坐标移动到（x，y）
- m dx dy：相对于当前位置移动（dx，dy）
画直线（Line To）：L 或 l
- L x y：绝对坐标画直线到（x，y）
- l dx dy：相对于当前位置画直线（dx，dy）
画水平线（Horizontal Line To）：H 或 h
- H x：绝对坐标画水平线到 x 坐标
- h dx：相对于当前位置画水平线 dx 距离
画垂直线（Vertical Line To）：V 或 v
- V y：绝对坐标画垂直线到 y 坐标
- v dy：相对于当前位置画垂直线 dy 距离
画弧线（Arc To）：A 或 a
- A rx ry x-axis-rotation large-arc-flag sweep-flag x y：绝对坐标画弧线，参数包括椭圆的半径(rx, ry)、x轴旋转角度、大弧标志位、顺时针标志位、目标点(x, y)
- a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy：相对于当前位置画弧线，参数类似于绝对坐标的情况
闭合路径（Close Path）：Z 或 z
- Z 或 z：从当前位置连接到起始位置，形成一个闭合路径

在这里我画了个坐标轴，大家有没有发现这里面的y轴是倒着的，这就是我上述讲的svg填充规则：原点（0,0）位于 SVG’ 画布的左上角。

下图由于在mdn中它里面的可视区y轴就100px，所以我就都/2了

<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="black" d="M60,0 L60,30 " />
   <path fill="none" stroke="black" d="M60,15 L95,15 " />
   <path fill="none" stroke="black" d="M40,30 L90,30 L90,50 L40,50" />
     <path fill="none" stroke="black" d="M40,30 Q45,40 40,50 Q40,80 20,100" />
     </svg>

这样就简简单单绘制了个卢字，那么再绘制个三角形不简简单单嘛，面试是不是又多了分把握

//通过 3 个坐标点，实现一个多边形，多余的空间则会被裁减掉，代码也非常简单：
div {
    background: deeppink;
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}

剩下的就交给大家自行挖掘吧！