clip-path 在实际中的运用

背景

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

最近也没做什么系统性的总结， 为了保持手感，今天就先写个做业务的时候，用到的一个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 这个属性， 大概就直接画三角形来实现了吧。

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

关注我

如果你觉得这篇内容对你挺有启发，那就关注我吧～

更多精彩：

聊聊 ESM、Bundleless 、Vite 、Snowpack

记一次 「 无限列表 」滚动优化

「 面试三板斧 」之 代码分割（上）

「 面试三板斧 」之缓存 (上)

「 面试三板斧 」之缓存 (下)

「 面试三板斧 」之 HTTP （上）

「 面试三板斧 」之 HTTP （下）

「 面试三板斧 」之  this