clip-path表示剪裁路径，也就是从某个物体上剪切一块内容。比如在图片上根据需要剪切一部分需要留下的区域。
这里涉及到两个概念: 裁剪路径clipping path，裁剪区域clipping region。
裁剪路径就是用来裁剪元素的路径，标记了需要裁剪的区域。可以是任意形状。
裁剪区域就是裁剪路径闭合后所包含的全部区域。
浏览器会裁剪掉裁剪区域以外的内容，包括: 背景，内容，边框，阴影等，另外也不会捕获裁剪区域之外的hover click等事件。
clip-path语法
clip-path: <clip-source>|[<basic-shape>||<geometry-box>]|none
clip-source 可以是内部，外部的SVG的clipPath元素的URL引用
basic-shape使用一些基本形状函数创建的一个形状 circle() ellipse() inset() polygon()
geometry-box可选参数，和basic-shape一起使用，可以为其裁剪工作提供参考盒子。
浏览器前缀 -webkit-
注意:
使用clip-path绘制形状要从同一个方向进行绘制，如果是顺时针就一律顺时针。
示例一
使用polygon来绘制菱形
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50% )
polygon指定了四个顶点。XY坐标轴分别规定X轴正方向向右，Y轴正方向向下。
示例二
使用geometry-box来裁剪元素
geometry-box一共有7个值，分别是margin-box, border-box, padding-box, content-box, fill, stroke, view-box等
其中fill stroke view-box是运用在SVG元素上的
margin-box, border-box, padding-box, conent-box是运用在HTML元素上的
例如 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) margin-box
CSS clip-path maker提供了很多常用clip-path
bennettfeely.com/clippy/
1. Triangle 三角形
clip-path: polygon(50% 0%, 100% 100%, 0% 100%)
2. Rhombus 菱形
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%)