使用 CSS Mask 和 Clipping Path

terry 2年前 (2023-09-27) 阅读数 67 #数据结构与算法

CSS Mask 属性偷工减料以创建精美边框的技巧。本文将使用CSS Mask和clippingpath来剪切元素。四个角！使用各种技术从任何元素的角上切割出不同的形状。在本文中，我们将考虑创建独特角形状的现代技术，同时尝试使用可重用代码，使我们只需通过调整变量即可产生不同的结果。

查看此在线工具，了解我们正在构建的内容。这是一个 CSS 生成器，您可以选择不同的形状、角和大小并实时获取 CSS 代码！
CSS mask和clip-path实现切角的技巧

我们主要有两种切割方式：一种是圆形的，另一种是倾斜的。对于每种类型，我们可以选择获得完整形状或纯边缘形状，以及切角的方向。

与上一篇文章一样，我们将大量使用CSS mask属性。如果您不熟悉它，我建议您在继续之前阅读我编写的快速入门。

圆形切割角

对于圆形切割，我们使用radial-gradient()。切割四个角时，合理的解决方案是创建四个渐变，每个角一个渐变：
CSS mask和clip-path实现切角的技巧

每个圆形切割占用整个元素大小的四分之一。如上图所示，左上角的剪切代码如下：

radial-gradient(circle 30px at top left, #0000 98%, red) top left;

上述代码平移后，左上角出现一个半径为30px的圆。主要颜色为透明（#0000），其余为红色。其他三个渐变的逻辑是相同的。这里的关键字circle可以省略，因为显式指定了半径值。

就像我在上一篇文章中所做的那样，这次我将使用稍大或稍小的值以避免不良的视觉效果。这里我使用 98% 而不是 100% 来避免锯齿状边缘，使用 51% 而不是 50% 来创建渐变之间的重叠并避免间隙。本文继续遵循这个逻辑。在实际开发中，你会发现增加或减少1%或1deg通常会产生良好的视觉效果。

然后将这个逻辑应用到CSS mask属性上，效果如下：
CSS mask和clip-path实现切角的技巧
核心CSS代码如下：代码可能有点重复，优化一下代码：

--g: #0000 98%,#000;
--r: 30px;
mask:
  radial-gradient(var(--r) at 0    0   ,var(--g)) 0    0,
  radial-gradient(var(--r) at 100% 0   ,var(--g)) 100% 0,
  radial-gradient(var(--r) at 0    100%,var(--g)) 0    100%,
  radial-gradient(var(--r) at 100% 100%,var(--g)) 100% 100%;
mask-size: 51% 51%;
mask-repeat: no-repeat;

这样我们就可以对冗余值使用自定义属性，作为个人喜好，我对位置使用数字值而不是关键字。

在生成器中将使用以下语法，省略mask-size和mask-repeat♸我们可以使用更小的渐变：❀？

当然！渐变也可以达到这种效果。以下动画效果 hover 基于渐变实现：

这里我们定义一个没有大小的 radial-gradient()。默认情况下，高度为 100%，宽度为 100%。这给我们留下了中间的一个洞。我们将渐变转换为图像宽度和高度的一半，并将孔移动到角落。由于 CSS 蒙版默认情况下会重复，因此我们在每个角落都会得到相同的效果。我们有四个切角并且只使用一种渐变！

这种方法唯一的缺点是我们需要提前知道元素的宽度和高度。

`我们可以使用-50%来代替宽度和高度的一半吗？`

不幸的是，这在这里是不可能的，因为当与CSS mask-position属性一起使用时，百分比的行为与像素值不同，并且更难以使用。我有一个详细的堆栈溢出答案来解释其中的差异。它涉及 backgroundPosition，但相同的逻辑也适用于 CSS MaskPosition 属性。

但是，我们可以使用一些技巧使其在不知道宽度或高度的情况下使用百分比值。当渐变（或背景层）的宽度和高度等于元素时，我们无法将其移动百分比值。所以我们必须改变尺寸！

定义等于 99.5% 99.5% 的大小。将宽度和高度减小 0.5% 可以保持基本相同的视觉结果，因为我们不会注意到 100% 和 99.5% 之间的巨大差异。现在我们的渐变大小不是 100%，我们可以使用百分比值来移动它。

要移动宽度和高度的一半，我们需要使用以下方程式：

100% * (50/(100 - 99.5)) = 100% * 100 = 10000%

它看起来像是一个奇怪的值，但效果很好。

mask: radial-gradient(30px,#0000 98%,#000) 10000% 10000%/99.5% 99.5%

这个技巧效果非常好。无论元素大小如何，我们都可以用渐变切割四个角。但当元素的宽度或高度是十进制值时，这种方法有一个小缺点。以下是宽度等于 150.5 像素的图像的示例：使用 99.5% 和 150.5px 会产生舍入问题，这会破坏计算并导致蒙版有些未对齐。因此，请谨慎使用此方法。

有一种解决方案，只有一个梯度并且没有舍入问题。使用以下代码：

mask: radial-gradient(30px at 30px 30px,#0000 98%,#000) -30px -30px

技巧是在左上角创建一个圆圈，并通过以负偏移量移动它来覆盖四个角。将鼠标悬停在下方即可查看此技巧。

这种方法非常完美，因为它使用渐变并且没有舍入问题。但它有一个缺点，半径值使用了5次。但我们可以通过使用自定义属性来简化：

--r: 30px;
mask: radial-gradient(var(--r) at var(--r) var(--r),#0000 98%,#000) calc(-1*var(--r)) calc(-1*var(--r))

让我们快速看一下我们刚刚介绍的三种方法：

第一种方法使用四个渐变，在使用方面没有任何缺点，并且适用于所有类型的渐变。元素和尺寸。但代码大小非常详细。
第二种方法使用梯度，但在某些情况下偏移可能不准确。它适用于固定大小的元素。
第三种方法使用梯度，没有舍入问题。这是执行此操作的完美方法，但它要求您在渐变值内多次应用半径。

`仅剪切一些角`

现在我们已经了解了所有角的情况，让我们禁用其中一些角。使用第一种方法，我们想要保留未切割的任何顶点，我们只需删除渐变并调整剩余内容的大小即可。

当您想要禁用右上角时：

删除了右上角的渐变（蓝色渐变）。
此时有一个空角，因此增加红色渐变（或紫色渐变）的大小以覆盖剩余空间。

这里可以做出多少种可能性和组合。如果需要切割 N 个顶点（其中 N 从 1 到 4 变化），请使用 N 个渐变。我们只需要正确调整每一个的大小，使其填满整个空间。

其他只有一种梯度的方法怎么样？我们需要使用另一个渐变！两种方法都只是使用 radial-gradient() 来切角，因此我们将依靠另一个渐变来“隐藏”切口。我们可以通过使用 conic-gradient() 来实现此效果，该效果由四个部分组成：

conic-gradient(red 25%, blue 0 50%, green 0 75%, purple 0)

conic-gradient() 将覆盖 ❀这条路径将❀❀不会偷工减料。让我们将 conic-gradient() 中的一种颜色更改为透明。例如，将右上角改为透明会有如下效果：核心代码如下：

conic-gradient(#0000 25%,blue 0 50%,green 0 75%,purple 0)

通过改变conic-gradient()的颜色，从opa我们可以达到我们想要的效果走捷径并获得不同的可能组合。

要切割四个角，第一种方法需要四个渐变，而第三种方法只需要一个渐变，所以我们使用最后一种。
要切角，第一种方法需要一个渐变，而第三种方法需要两个渐变，因此可以使用第一个渐变。
要切割两个角，请对两个角应用两个渐变。
要切割三个角，一种方法将使用三个渐变，另一种方法将仅使用两个渐变。

上面介绍了每种情况合适的方法，我们总共不需要超过两个梯度。但在实际应用中，应该选择更优化、更简洁的代码。

`圆形边缘倒角`

然后实施形状与上述相同的干净边缘版本。换句话说，我们实现相同的形状，但删除填充，只留下形状的边缘。

这个比较麻烦。这里会使用很多渐变，同时尽可能减少数量。在这种情况下，将考虑伪元素。仅显示边框意味着我们必须隐藏形状的内部“填充”。

`一个角`

如下图所示，您需要一个径向渐变和两个圆锥形渐变：图1展示了径向渐变（红色）和圆锥形渐变（蓝色和绿色）。在图 2 中，我们将它们全部应用于 CSS 网格属性，以创建带有切角的干净边框形状。

如图所示，radial-gradient()形成四分之一圆，每个conic-gradient()形成两个垂直线段。使用相同的代码并调整一些变量，我们可以获得其他角的形状。

`两个角`

对于两角配置，我们有两种情况。

在第一种情况下，有两个对角，我们需要两个径向渐变和两个圆锥形渐变。

配置几乎与只是切角相同，我们添加了额外的渐变并更新了一些变量。核心代码如下：

 --g: #0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000;
  --mask:
    radial-gradient(farthest-side at 0    0   ,var(--g)) 0    0/40px 40px no-repeat,
    conic-gradient(from 180deg at right 10px top    10px, #0000 0 90deg,#000 0) 100% 0/calc(100% - 40px + 10px) calc(100% - 40px + 10px) no-repeat,
    radial-gradient(farthest-side at 100% 100%,var(--g)) 100% 100%/40px 40px no-repeat,
    conic-gradient(from 0deg   at left  10px bottom 10px, #0000 0 90deg,#000 0) 0 100%/calc(100% - 40px + 10px) calc(100% - 40px + 10px) no-repeat;
  background:linear-gradient(45deg,blue,red);
  mask: var(--mask);

第二种情况有两个相邻的顶点，这种情况下我们需要一个径向渐变、一个圆锥形渐变和一个线性渐变。 “等等！”你可能会惊呼。 “为什么圆锥曲线覆盖三个边？”。在所有示例中，我们始终使用不重复，但在这里我们可以重复其中之一以覆盖更多页面并减少我们使用的渐变数量。所以这里我们使用repeat-y。

您可能想知道的另一个问题是径向渐变如何切割两个角。为此，我们制作一个半圆并将其放置在左上角。然后，使用负偏移，我们切割两个相邻的角。您可以观看下面的悬停动画来了解此技术。

`三个角`

依此类推，对于此配置，我们需要两个径向渐变、一个圆锥形渐变和两个线性渐变。

`四个角`

接下来，相交所有四个角需要一个径向渐变和两个线性渐变。

您可能会想，“我怎样才能记住所有这些盒子？！”您无需记住任何内容，因为您可以使用在线生成器轻松为每种情况生成代码。您只需要了解一般技术，而不需要了解每种情况。这就是为什么我只详细介绍了第一组配置 - 其余的只是调整该技术的初始基础的迭代。

请注意，在整个示例中，我们遵循一个通用模式：

我们在要剪切的角上方添加一个radial-gradient()。我们用圆 conic-gradient() 或 linear-gradient() 填充侧面以创建最终形状。我们可以找到不同的方法来制作相同的形状。我在这篇文章中展示的是我在尝试了许多其他想法后发现的最好的东西。如果您觉得有更好的方法，欢迎留言分享！

`角度切割`

接下来我们讨论另一种类型的切割形状：角度切割。

我们有两个参数：切割的尺寸和角度。为了获得形状，我们需要为每个角使用 conic-gradient()。此配置与本文中启动的示例非常相似。

以下是角点的实现技巧：每个角点之间的差异是起始位置和距该位置 90 度的额外偏移。完整的代码如下所示：

--size: 30px;
--angle: 130deg;

--g: #0000 var(--angle), #000 0;
mask:
  conic-gradient(from calc(var(--angle)/-2 -  45deg) 
    at top    var(--size) left  var(--size),var(--g)) top left,
  conic-gradient(from calc(var(--angle)/-2 + 45deg) 
    at top    var(--size) right var(--size),var(--g)) top right,
  conic-gradient(from calc(var(--angle)/-2 - 135deg) 
    at bottom var(--size) left  var(--size),var(--g)) bottom left,
  conic-gradient(from calc(var(--angle)/-2 + 135deg) 
    at bottom var(--size) right var(--size),var(--g)) bottom right;
mask-size: 51% 51%;
mask-repeat: no-repeat;

如果我们想要禁用某个角，我们删除该角的 conic-gradient() 并更新另一个角的大小以填充剩余空间，就像我们一样对圆形切割也做了同样的事情。这就是角的样子：

除了CSS mask之外，我们还可以使用CSS Clip-path属性来剪切角。每个角都可以由三个点定义。其他角具有相同的值，偏移量为 100%。这给了我们总共 12 点的最终代码 - 每个角 3 点。

clip-path: polygon(
  /* Top-left corner */
  0 T, size size,0 T, /* OR 0 0 */
  /* Top-right corner */
  calc(100% - T) 0,calc(100% - size) size,100% T, /* OR  100% 0 */
  /* Bottom-right corner*/
  100% calc(100% - T),calc(100% - size) calc(100% - size), calc(100% - T) 100%, /* OR 100% 100% */
  /* Bottom-left corner */ 
  T 100%, size calc(100% - size),0 calc(100% - T) /* OR 0 100% */
)

请注意此代码中的 OR 注释。它定义了如果我们想要禁用特定角点需要考虑的代码。为了切入一个角，我们使用三个点。为了解开一个角，我们使用一个点——它只不过是该角的坐标。

`90度特殊处理`

当角度等于90度时，我们可以优化代码的渐变版本，依赖更小的渐变。要切割四个角，我们只能使用一个渐变：

--size: 30px;
mask: 
  conic-gradient(at var(--size) var(--size),#000 75%,#0000 0) 
  0 0/calc(100% - var(--size)) calc(100% - var(--size))

对于 90 度，我们有两种渐变方法，第一个是我们之前详细介绍的用渐变切割每个角的方法，最后一个是我们使用渐变偷工减料。我想你知道故事的其余部分：为了梳理出一些角落，我们将最后一种方法与圆锥形渐变结合起来。正如我所说，没有必要记住所有的方法和技巧。生成器将为您生成代码，我只是试图使本文尽可能详细以涵盖所有可能的场景。