裁剪、裁剪，以及更多裁剪！

您可以使用裁剪路径做很多事情。 我已经探索它们有一段时间了，并且想出了不同的技术和用例——我想与大家分享我的发现！ 我希望这将激发您对使用 CSS clip-path 属性可以做出的有趣事情的新想法。 希望您要么将它们用于您的项目，要么玩一玩并享受其中。

在深入探讨之前，值得一提的是，这是我在 CSS-Tricks 上关于裁剪路径的第三篇帖子。 您可能想查看这些帖子以获取一些背景信息

• 使用 CSS 裁剪路径创建交互式效果
• 使用 CSS 裁剪路径创建交互式效果，第二部分

本文充满了新想法！

想法 1：双重裁剪

一个巧妙的技巧是使用裁剪路径多次裁剪内容。 听起来可能很明显，但我没有看到很多人使用这个概念。

例如，让我们看看一个展开的菜单

查看 CodePen 上 Mikael Ainalem (@ainalem) 编写的笔
更多菜单
在 CodePen 上。

裁剪只能应用于 DOM 节点一次。 一个节点不能具有同一 CSS 规则的多个活动实例，这意味着每个实例一个clip-path。 但是，对于可以组合裁剪节点的次数没有上限。 例如，我们可以将一个裁剪的<div>放置在另一个裁剪的<div>内部，依此类推。 在 DOM 节点的祖先中，我们可以应用任意数量的单独裁剪。

这正是我在上面的演示中所做的。 我让一个裁剪的节点填充另一个裁剪的节点。 父级充当边界，子级在放大时填充父级。 这会产生一种不寻常的效果，即出现一个圆角菜单。 可以将其视为overflow: hidden的高级方法。

当然，您可以争辩说 SVG 更适合此目的。 与裁剪路径相比，SVG 能够做更多的事情。 除其他外，SVG 提供平滑缩放。 如果裁剪完全支持贝塞尔曲线，那么情况就会不同。 在撰写本文时，情况并非如此。 无论如何，裁剪路径非常方便。 一个节点，一个 CSS 规则，您就可以开始了。 就上面的演示而言，裁剪路径做得很好，因此是一个可行的选择。

我制作了一个简短的视频，解释了菜单的内部工作原理

想法 2：缩放裁剪路径

另一个（不太明显）的技巧是使用裁剪路径进行缩放。 我们实际上可以使用 CSS 过渡来动画化裁剪路径！

过渡系统在其构建方式上令人惊叹。 在我看来，它添加到 Web 中是 Web 近年来取得的最大飞跃之一。 它支持在一系列不同的值之间进行过渡。 裁剪路径是我们可以动画化的可接受值之一。 通常，动画意味着在两个极端之间进行插值。 对于裁剪，这意味着在两个完整且不同的路径之间进行插值。 这就是 Web 精细的动画系统展现其优势的地方。 它不仅适用于单个值——它还在动画化值集时起作用。

在专门动画化裁剪路径时，每个坐标都会单独进行插值。 这很重要。 它使裁剪路径动画看起来连贯且流畅。

让我们看看演示。 单击图像以重新启动效果

查看 CodePen 上 Mikael Ainalem (@ainalem) 编写的笔
品牌剪裁缩放
在 CodePen 上。

我在此演示中使用clip-path过渡。 它用于从覆盖一个小区域的裁剪路径放大到另一个巨大的裁剪路径。 裁剪路径的最小版本远小于分辨率——换句话说，应用时肉眼不可见。 另一个极端略大于视口。 在此缩放级别，没有可见的裁剪，因为所有裁剪都在可见区域之外进行。 在这两个不同的裁剪路径之间进行动画会产生有趣的效果。 裁剪的形状似乎在放大时显示其背后的内容。

您可能已经注意到，演示使用了不同的形状。 在这种情况下，我使用的是流行运动鞋品牌的徽标。 这让您了解在更现实的场景中使用该效果的效果。

同样，这里有一个视频详细介绍了技术细节

想法 3：裁剪覆盖层

另一个想法是使用裁剪路径创建高亮效果。 例如，假设我们想使用裁剪路径在菜单中创建活动状态。

查看 CodePen 上 Mikael Ainalem (@ainalem) 编写的笔
倾斜的可伸缩菜单
在 CodePen 上。

上面的裁剪路径在动画时会在不同的菜单选项之间延伸。 此外，我们使用了一个有趣的形状来使 UI 略微突出。

演示使用相同内容的修改副本，其中副本位于现有内容的顶部。 它放置在与菜单完全相同的位置，并用作活动状态。 本质上，它看起来像菜单的任何其他常规活动状态。 不同之处在于它是使用裁剪路径而不是 HTML 元素上的花哨 CSS 样式创建的。

使用裁剪可以在这里创建一些不寻常的效果。 倾斜的形状是一方面，但我们也获得了伸缩效果。 菜单带有两个单独的裁剪——一个在左侧，一个在右侧——这使得可以使用过渡延迟以不同的时间安排动画化裁剪。 结果是在几乎没有努力的情况下产生了一个伸缩动画。 由于默认缓动是非线性的，因此延迟会导致轻微的橡皮筋效果。

这里的第二个技巧是根据方向应用延迟。 如果活动状态需要向右移动，则右侧需要首先开始动画化，反之亦然。 我通过使用一点 JavaScript 在点击时相应地应用正确的类来获得方向感知。

想法 4：扇形切片

您在 Web 上看到圆形展开菜单的频率有多高？ 荒谬，对吧！？ 嗯，裁剪路径不仅使它成为可能，而且非常简单。

查看 CodePen 上 Mikael Ainalem (@ainalem) 编写的笔
圆形菜单
在 CodePen 上。

我们通常会看到包含以单行或下拉菜单形式排序的链接的菜单，就像我们之前看到的第一个技巧一样。 我们在这里要做的是将这些链接放置在弧形而不是矩形中。 当然，使用矩形将是传统的方式。 这里的想法是探索更适合移动设备的交互，并牢记两个特定的UX原则

• 一个用拇指点击起来很舒服的清晰目标
• 变化发生在焦点附近——您视觉焦点所在的位置

演示并非专门针对裁剪路径。 我碰巧使用裁剪路径来创建笔。 再次，就像之前的可扩展菜单演示一样，这是一个方便的问题。 使用裁剪和 50% 的边框半径，我立即获得了所需的弧形。

想法 5：切换

切换从未停止让像我们这样的 Web 开发人员惊叹不已。 似乎每周都会有人推出切换的新解释。 嗯，这是我的

查看 CodePen 上 Mikael Ainalem (@ainalem) 编写的笔
反向切换
在 CodePen 上。

演示是 Oleg Frolov 编写的 此 Dribbble 作品 的重制版。 它结合了本文中介绍的所有三种技术。 它们是

• 双重裁剪
• 缩放裁剪路径
• 裁剪覆盖层

所有这些开/关开关似乎都有一点共同点。 它们由椭圆形背景和一个圆圈组成，类似于真实的机械开关。 此切换的工作方式是放大圆形容器内的圆形裁剪路径。 容器通过overflow: hidden裁剪内容，即双重裁剪。

演示的另一个关键部分是在标记中拥有两个交替版本。 它们是原始版本及其阴阳反转镜像副本。 使用两个版本而不是一个版本是为了方便起见，可能会重复。 使用两个版本，我们只需要为第一个版本创建过渡。 然后，我们可以将其大部分内容重复用于第二个版本。 在过渡结束时，切换切换到相反的版本。 由于反转版本与之前的结束状态相同，因此无法发现切换。 此技术的优点是重复使用动画的部分内容。 缺点是在中断动画时会出现卡顿。 这种情况发生在用户在动画完成之前按下切换时。

让我们再次看看引擎盖下

结束语

你可能会想：探索是一回事，但生产呢？我可以在我正在开发的网站上使用剪切路径吗？它准备好投入使用了么？

嗯，这个问题没有简单的答案。除了其他事项外，有两个问题需要仔细研究

1. 浏览器支持
2. 性能

在撰写本文时，根据caniuse，大约有 93% 的浏览器支持。我想说我们正处于大规模采用的边缘。请注意，此数字考虑了 WebKit 前缀。

也总是有 IE 的争论，但对我来说这真的不算什么争论。我不认为为了 IE 而付出额外的努力是值得的。你应该为一个不安全的浏览器创建变通方案吗？你的用户最好使用现代浏览器。当然，有一些罕见的情况需要使用遗留系统。但你可能根本不会在这些情况下考虑现代 CSS。

那么性能如何呢？好吧，随着事情的累积，性能会变得棘手，但没有什么能阻止我们今天使用剪切路径。始终是测量的性能才算数。剪切路径平均情况下可能会比其他 CSS 规则造成更大的性能损耗。但请记住，我们这里介绍的做法是建议，而不是法律。将其视为建议。养成衡量性能的习惯。

继续吧，把你的网页剪成碎片。看看会发生什么！