背景

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

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

正文

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

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

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

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

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

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

也去简单实现了一下：

代码：

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

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

它的属性值包括四个：

clip-source: 可以是内、外部的SVG的clipPath元素的URL引用;
basic-shape: 使用一些基本的形状函数创建的一个形状。主要包括:
- circle()
- ellipse()
- inset()
- polygon()
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 这个属性，大概就直接画三角形来实现了吧。

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