剪裁，剪裁和更多剪裁！

CSS clip-path 属性的妙用：探索多种创意技巧及应用案例。本文将分享一系列使用 clip-path 属性实现的有趣效果，希望能激发您在项目中应用或进行创意尝试。

这已经是笔者在 CSS-Tricks 上发表的第三篇关于 clip-path 的文章了，如果您想了解背景知识，可以先阅读以下文章：

• 使用 CSS clip-path 创建交互式效果
• 使用 CSS clip-path 创建交互式效果，第二部分

本文将介绍全新的创意！

创意一：双重裁剪

一个巧妙的技巧是多次使用 clip-path 来裁剪内容。这听起来可能很明显，但实际上很少有人用到这个概念。

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

clip-path 只能应用于单个 DOM 节点一次。一个节点不能同时拥有多个相同 CSS 规则的活动实例，这意味着每个实例只有一个 clip-path。但是，组合裁剪节点的次数没有上限。例如，我们可以将一个裁剪的 <div> 放置在另一个裁剪的 <code><div> 内，以此类推。在 DOM 节点的祖先关系中，我们可以应用任意多个独立的裁剪。这正是上面演示中所做的。我让一个裁剪的节点填充另一个裁剪的节点。父节点充当边界，子节点在缩放时填充父节点。这会产生一种不寻常的效果，即出现一个圆角菜单。可以将其视为 <code>overflow: hidden 的一种高级方法。

当然，您可以认为 SVG 更适合此目的。与 clip-path 相比，SVG 能够实现更多功能。其中包括平滑缩放。如果 clip-path 完全支持贝塞尔曲线，情况就会有所不同。但在撰写本文时，情况并非如此。无论如何，clip-path 非常方便。一个节点，一个 CSS 规则，您就可以开始了。就上面的演示而言，clip-path 完成了这项工作，因此是一个可行的选择。

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

创意二：缩放裁剪路径

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

过渡系统在其构建方式上令人惊叹。在我看来，它的加入是近年来 Web 技术发展中最大的飞跃之一。它支持各种不同值的过渡。clip-path 属于我们可以动画化的可接受值。动画通常意味着在两个极值之间进行插值。对于 clip-path，这意味着在两个完整不同的路径之间进行插值。这就是 Web 精细的动画系统展现其优势的地方。它不仅适用于单个值，也适用于动画化值集。

在动画化 clip-path 时，每个坐标都会单独进行插值。这一点很重要。它使 clip-path 动画看起来连贯流畅。

让我们来看一下演示。点击图像以重新启动效果：

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

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

同样，这里还有一个视频详细讲解了技术细节：

创意三：裁剪叠加层

另一个想法是使用 clip-path 创建高亮效果。例如，假设我们想使用 clip-path 来创建一个菜单的活动状态。

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

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

使用 clip-path 可以在这里创建一些不寻常的效果。倾斜的形状是一方面，但我们也获得了拉伸效果。菜单有两个独立的裁剪——一个在左边，一个在右边——这使得可以使用过渡延迟以不同的时间来动画化裁剪。结果是一个非常轻松的拉伸动画。由于默认缓动是非线性的，延迟会导致轻微的橡皮筋效果。

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

创意四：扇形切片

您在 Web 上看到圆形展开菜单的频率有多高？荒谬，对吧！？好吧，clip-path 不仅使它成为可能，而且相当简单。

我们通常看到的菜单包含以单行甚至下拉菜单形式排列的链接，就像我们之前看到的第一个技巧一样。我们在这里做的是将这些链接放在弧形而不是矩形中。当然，使用矩形是传统的方法。这里的想法是探索更友好的移动交互，并牢记两个具体的 UX 原则：

• 一个清晰的目标，用拇指轻松点击
• 更改发生在焦点附近——您视觉焦点所在的位置

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

创意五：切换按钮

切换按钮总是让像我们这样的 Web 开发人员惊叹不已。似乎每周都会有人介绍一种新的切换按钮解释。好吧，这是我的：

该演示是 Oleg Frolov 的 Dribbble 截图的重制版。它结合了本文中介绍的所有三种技术。这些是：

• 双重裁剪
• 缩放裁剪路径
• 裁剪叠加层

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

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

让我们再次看看幕后：

结语

您可能会想：探索是一回事，但生产呢？我可以在我目前正在处理的网站上使用 clip-path 吗？它准备好投入生产了吗？

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

1. 浏览器支持
2. 性能

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

还有 IE 的论点，但这对我来说真的不算什么论点。我看不出为 IE 额外努力有什么意义。您应该为不安全的浏览器创建变通方法吗？您的用户最好使用现代浏览器。当然，有一些罕见的情况需要考虑遗留问题。但在这些情况下，您可能根本不会考虑使用现代 CSS。

那么性能呢？好吧，随着事情的增加，性能会变得棘手，但我不会说有什么会阻止我们今天使用 clip-path。始终衡量的性能才是重要的。平均而言，clip-path 造成的性能影响可能比其他 CSS 规则更大。但请记住，我们在这里介绍的做法是建议，而不是法律。将它们视为建议。养成衡量性能的习惯。

继续吧，将您的网页切成碎片。看看会发生什么！