/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
}
看上去很多,其实很好理解,如果接触过 SVG 的 path,其实就是照搬 SVG 的 path 的一些定义。换言之,如果没有接触过 SVG,看完本文后再去学习 SVG 路径 ,也会十分容易上手。
根据不同的语法,我们可以生成不同的图形。
例如 clip-path: circle(50px at 50px 50px)
表示在元素的 (50px, 50px)处,裁剪生成一个半径为 50px 的圆。
以元素的左上角为坐标起点
而整个 clip-path
属性,最为重要的当属 polygon
,可以利用 polygon
生成任意多边形。
clip-path 示例
下面分别列举使用 clip-path 生成一个圆形和一个十边形。
/* 圆形 */
.circle {
width: 100px;
height: 100px;
background-color: yellowgreen;
clip-path: circle(50px at 50px 50px);
}
/* 十边形 */
.polygon {
width: 100px;
height: 100px;
background-color: yellowgreen;
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}
clip-path: circle(50px at 50px 50px)
上文也讲了,表示在元素的 (50px, 50px)处,裁剪生成一个半径为 50px 的圆。
而在 clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%)
中,依次列出了 10 个坐标点。我们的图形就是依次连接这 10 个坐标点形成一个裁切图形。
当然,这里采用的是百分比,也可以使用具体的数值。
clip-path 动画
clip-path 另外一个强大之处在于可以进行 CSS transtion 与 CSS animation,也就是过渡和动画。
看一个多边形的过渡切换动画。
CodePen Demo -- Clip-path 多边形过渡动画
<iframe title="clip-path polygon-animate" src="https://codepen.io/Chokcoco/embed/LLNWyZ/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">
图形变换动画
除此之外,我们还可以尝试,将一个完整的图形,分割成多个小图形,这也是 clip-path
的魅力所在,纯 CSS 的图形变换:
CodePen Demo -- Clip-path triangle2rect
<iframe title="clip-path triangle2rect" src="https://codepen.io/Chokcoco/embed/yXOjZm/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">
clip-path 动画的局限
clip-path 动画虽然美好,但是存在一定的局限性,那就是进行过渡的两个状态,坐标顶点的数量必须一致。
也就是如果我希望从三角形过渡到矩形。假设三角形和矩形的 clip-path
分别为:
- 三角形:
clip-path: polygon(50% 0, 0 100%, 100% 0)
- 矩形:
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
进行过渡动画时候,直接从 polygon(50% 0, 0 100%, 100% 0)
--> polygon(0 0, 100% 0, 100% 100%, 0 100%)
是不行的,因为是从 3 个坐标点变换到 4 个坐标点。
因此这里需要这用一个讨巧的办法,在三角形的表示方法中,使用四个坐标点表示,其中两个坐标点进行重合即可。也就是:
- 三角形:
clip-path: polygon(50% 0, 0 100%, 100% 0)
-> clip-path: polygon(50% 0, 50% 0, 0 100%, 100% 0)
N边形过渡动画
如果脑洞够大,随机生成 N(N>=1000)边形,进行变换,会是什么效果呢?
see one see:
CodePen Demo -- 2000边形过渡动画
<iframe title="clip-path Fxxk" src="https://codepen.io/Chokcoco/embed/XgJRzO/?height=265&theme-id=0&default-tab=js,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">
变换的瞬间很有爆炸的感觉。不过这里有个很大的问题,只是随机生成了 2000 个坐标点,然后使用 clip-path
将这些坐标点连接起来,并不是符合要求的多边形。
在 VUE官网,有下面这样一个例子,一个规则的多边形进行不断的过渡动画,非常酷炫:
VUE官网使用的是 SVG 实现的,这里我稍微改变了下,使用 CSS clip-path
实现:
CodePen Demo -- clip-path N polygon ,感兴趣可以看看。
<iframe title="clip-path N polygon" src="https://codepen.io/Chokcoco/embed/NgqGOo/?height=265&theme-id=0&default-tab=js,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">
shape-outside
最后再来看看 shape-outside
,另外一个有趣的有能力生成几何图形的属性。
shape-outside
是啥?它也有制造各种几何图形的能力,但是它只能和浮动&nbs