[CSS语法]clip-path

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%)