背景

上半年鸽了好多篇文章，心口一阵绞痛，实在是忙，最近也在搞绩效相关的事情，等这个月过完，差不多就能定了，到时候再和大家好好交代交代。

最近也没做什么系统性的总结，为了保持手感，今天就先写个做业务的时候，用到的一个 css 属性: clip-path.

正文

需求

设计小姐姐画了一个标签：

从原本的镂空的设计(就是只有边框的那种), 改成了实心的。

原本镂空的实现方式是: 一个矩形，然后用 before, after 做两条线当头部，一个标签就能搞定。

现在要做成实心儿的，要用最小的修改，实现这个效果，该怎么做呢？

瞬间，脑子里闪过了数种实现方式, 比如：

• 矩形旁边再加个三角形
• 用两个白色的三角形去盖一下
• 背景裁剪

前两种方式是最先想到的，可是脑补了一下，觉得好麻烦啊，最好能一行代码搞定，clip-path 能满足这个想法。

也去简单实现了一下：

代码：

clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%);

每一个点代表一个坐标，只要设定好切割的坐标点，就能得到我们想要形状。比如：

几个属性

它的属性值包括四个：

1. clip-source: 可以是内、外部的 SVG 的 clipPath 元素的 URL 引用;

2. basic-shape: 使用一些基本的形状函数创建的一个形状。主要包括:

   • circle()
   • ellipse()
   • inset()
   • polygon()
3. geometry-box: 是可选参数。
   此参数和 basic-shape 函数一起使用时，可以为 basic-shape 的裁剪工作提供参考盒子。
   如果 geometry-box 由自身指定，那么它会使用指定盒子形状作为裁剪的路径，包括任何 (由 border-radius 提供的) 的角的形状。

更详细的介绍可以参考 MDN：
https://developer.mozilla.org…

最终效果

兼容性

IE 和 Edge 不支持这个属性，Firefox 仅部分支持 clip-path。
Chrome、Safari 和 Opera 需要使用 -webkit- 前缀支持此属性。

结语

最终，用一行代码实现了设计的效果，省时省力。

最后的最后，再跟大家简单说一下学习，是我在学院听的一个分享。

平时要 持续学习 ，并 内化到自己的知识体系中，一个十分有效的做法就是: 实际运用起来，而不是仅仅停留在知道的层次，Get Yours Hands Dirty.

如果最初我不知道 clip-path 这个属性，大概就直接画三角形来实现了吧。

内容大概就这么多，希望对大家有所启发。