本文将使用CSSmask和clip-path对元素的四个角进行切角！可以使用各种技术从任何元素的角切割出不同的形状。在本文中，我们将考虑现代技术来创建独特的角形状，同时试验可重用代码，让我们仅通过调整变量就可以产生不同的结果。查看此在线工具以查看我们正在构建的内容。这是一个CSS生成器，你可以选择不同的形状、角和大小，实时获取CSS代码！我们主要有两种切法：一种是圆的，一种是斜的。对于每种类型，我们都可以选择得到完整的形状或纯边框形状，我们可以选择向哪个方向切角。与上一篇文章一样，我们将大量使用CSSmask属性。如果您不熟悉它，我建议您在继续之前阅读我写的快速入门。圆形切割对于圆形切割，我们使用radial-gradient()。切割四个角时，合乎逻辑的解决方案是创建四个渐变，每个角一个：每个圆形切割占据整个元素大小的四分之一。如上图，左上角的裁剪代码如下：radial-gradient(circle30pxattopleft,#000098%,red)topleft;上面代码翻译后，左上角会出现一个半径为30px的圆。主要颜色是透明的（#0000），其余颜色是红色。其他三个梯度的逻辑相同。这里的关键字circle可以省略，因为已经明确指定了半径值。就像我在上一篇文章中所做的那样，这次我将使用稍微大一点或小一点的值来避免糟糕的视觉效果。在这里，我使用98%而不是100%来避免锯齿状边缘，使用51%而不是50%来创建渐变之间的重叠并避免空白。本文继续遵循该逻辑。在实际开发中，你会发现增加或减少1%或1deg通常会带来不错的视觉效果。接下来将这个逻辑应用到CSSmask属性上，效果如下：核心CSS代码如下：.mask{-webkit-mask:radial-gradient(circle30pxattopleft,#000098%,#000)左上角，径向渐变（右上角的圆圈30px，#000098%，#000）右上角，径向渐变（左下角的圆圈30px，#000098%，#000）左下角，径向渐变（圆圈右下角30px，#000098%，#000)右下角；-webkit-mask-size:51%51%;-webkit-mask-repeat:no-repeat;}上面代码有很多重复的值，我们可以稍微优化一下代码：--g:#000098%,#000;--r:30px;掩码：径向梯度（var（--r）在00，var（--g））00，径向梯度（var（--r）在100％0，var（--g））100%0，径向梯度（var（--r）在0100%，var（--g））0100%，径向梯度（var（--r）在100%100%，var（--g))100%100%;mask-size:51%51%;mask-repeat:no-repeat;这样我们就可以让多余的值使用自定义属性，并且作为个人喜好，我使用位置的数值而不是关键字。在生成器中，将使用以下语法，省略mask-size和mask-repeat，使用简写：--g:#000098%,#000;--r:30px;mask:radial-gradient(var(--r)at00,var(--g))00/51%51%无重复，径向梯度(var(--r)at100%0,var(--g))100%0/51%51%不重复，径向梯度（var（--r）在0100%，var（--g））0100%/51%51%不重复，径向梯度（var（--r)at100%100%,var(--g))100%100%/51%51%无重复；我们可以使用更少的梯度吗？当然！渐变也可以实现这种效果。以下动画悬停效果是基于渐变实现的：在这里，我们定义了一个没有大小的radial-gradient()，默认为100%高度和100%宽度。这给我们留下了中间的一个洞。我们将梯度转换为图像宽度和高度的一半，并将孔转换为一个角。由于CSS掩码默认重复，我们在每个角落都得到相同的效果。我们有四个切角，只使用了一个渐变！这种方法的唯一缺点是我们需要提前知道元素的宽度和高度。我们可以使用-50%而不是半宽和半高吗？不幸的是，这不能在这里完成，因为当与CSSmask-position属性一起使用时，百分比的行为不同于像素值，后者更棘手。我有一个详细的堆栈溢出答案来解释差异。它涉及背景位置，但相同的逻辑适用于CSSmask-position属性。但是，我们可以使用一些技巧使其在不知道宽度或高度的情况下使用百分比值。当渐变（或背景层）的宽度和高度等于元素时，我们不能使用百分比值移动它。所以我们需要改变它的大小！定义一个尺寸等于99.5%99.5%。将宽度和高度减少0.5%，此时视觉结果基本相同，因为我们不会注意到100%和99.5%之间的巨大差异。现在我们的渐变大小与100%不同，我们可以使用百分比值移动它。要将它移动宽度和高度的一半，我们需要使用这个等式：100%*(50/(100-99.5))=100%*100=10000%看起来很奇怪，但效果很好。mask:radial-gradient(30px,#000098%,#000)10000%10000%/99.5%99.5%这种技术效果很好。不管元素的大小如何，我们只能用一种渐变切割四个角。但是当元素的宽度或高度是分数值时，这种方法有一个小缺点。这是一个宽度等于150.5px的图像示例：使用99.5%和150.5px会产生舍入问题，这会破坏计算并导致遮罩有一些错位。因此，请谨慎使用此方法。有一个只有一个梯度的解决方案，没有舍入问题。使用以下代码：mask:radial-gradient(30pxat30px30px,#000098%,#000)-30px-30px诀窍是在左上角创建一个圆圈，并以负偏移量移动它，我们覆盖四个角落。将鼠标悬停在下方以查看此技巧。这种方法是完美的，因为它使用渐变并且没有舍入问题。但它有一个缺点，radius的值被使用了5次。但是我们可以用一个自定义属性来简化它：--r:30px;mask:radial-gradient(var(--r)atvar(--r)var(--r),#000098%,#000)calc(-1*var(--r))calc(-1*var(--r))让我们快速回顾一下我们刚刚介绍的三种方法：第一种方法使用四个梯度，没有缺点，它适用于任何类型的元素和大小。但是它的代码量非常冗长。第二种方法使用梯度，但在某些情况下可能会有不准确的偏移量。它适用于固定大小的元素。第三种方法使用一个梯度并且没有舍入问题。这是完成此操作的完美方法，但它需要在渐变值内多次使用半径。只削减一些角落现在我们已经看到了所有的角落案例，让我们禁用其中的一些。使用第一种方法，任何我们想要保持未切割的角，我们只需删除它的渐变并调整剩余内容的大小。禁用右上角：移除右上角的渐变（蓝色渐变）。此时有一个空角，因此增加红色渐变（或紫色渐变）的大小以覆盖剩余空间。这里可以做多少种可能性和组合。如果需要切割N个角（其中N的范围为1到4），则使用N个梯度。我们只需要正确调整每一个的大小，使其填满整个空间。只有一个梯度的其他方法呢？我们需要使用另一个渐变！这两种方法只使用一个radial-gradient()来切角，所以我们将依靠另一个渐变来“隐藏”切角。我们可以使用包含四个部分的conic-gradient()来实现这个效果：conic-gradient(red25%,blue050%,green075%,purple0)conic-gradient()覆盖radial-gradient()，所以不会有倒角。让我们将conic-gradient()中的一种颜色更改为透明。比如把右上角改成透明就是下面的效果：核心代码如下：conic-gradient(#000025%,blue050%,green075%,purple0)通过改变颜色conic-gradient()从不透明变为透明可以让我们实现我们想要切割的角并获得各种可能的组合。切四个角，第一种方法需要四个梯度，而第三种方法只需要一个梯度，所以我们使用后者。切角，第一种方法需要一个渐变，而第三种方法需要两个渐变，所以可以使用第一个渐变。要削减两个角落，请对两者使用两个渐变。要切割三个角，一种方法将使用三个渐变，而另一种方法将仅使用两个渐变。上面描述了为每种情况选择合适的方法，我们总共不需要超过两个梯度。但在实践中，你应该选择更优化和简洁的代码。圆形表圈式倒角之后是与上述相同形状的纯表圈版本。换句话说，我们得到了相同的形状，但去掉了填充，只留下了形状的边框。这样比较繁琐，这里使用了很多梯度处理，同时尽量减少它们的数量。在这种情况下，将考虑伪元素。只显示边框意味着我们需要隐藏形状的内部“填充”。下图所示的角需要一个径向渐变和两个圆锥形渐变：图1说明了一个径向渐变（红色）和一个锥形渐变（蓝色和绿色）。在图2中，我们将它们全部应用到CSSmask属性以创建带有切角的纯边框形状。如图所示，radial-gradient()创建四分之一的圆，每个conic-gradient()创建两个垂直段以覆盖边。使用相同的代码调整几个变量，我们可以获得其他角的形状。两个角对于双角配置，我们有两种情况。在第一种情况下，有两个相对的角，我们需要两个径向渐变和两个圆锥渐变。配置几乎和切角一样，我们添加了一个额外的梯度并更新了一些变量。核心代码如下：--g:#0000calc(98%-10px),#000calc(100%-10px)98%,#0000;--mask:radial-gradient(farthest-sideat00,var(--g))00/40px40pxno-repeat,conic-gradient(from180degatright10pxtop10px,#0000090deg,#0000)100%0/calc(100%-40px+10px)calc(100%-40px+10px)不重复，径向渐变（最远侧在100%100%，var(--g))100%100%/40px40px不重复，锥形渐变（从0deg在左边10px底部10px，#0000090deg，#0000）0100%/calc（100%-40px+10px）calc（100%-40px+10px)不重复；背景：线性渐变（45度，蓝色，红色）；掩码：var（--掩码）；在第二种情况下，有两个相邻的角，在这种情况下我们需要一个径向渐变、一个圆锥渐变和一个线性渐变。“等待！”你可能会惊呼。“为什么圆锥形渐变覆盖三个边？”。在所有示例中，我们始终使用无重复，但在这里我们可以重复其中一个以覆盖更多边并减少我们使用的梯度数量。所以这里我们使用repeat-y。另一个你可能想知道径向渐变如何切割两个角。为此，我们创建一个半圆并将其放在左上角。然后，通过使用负偏移量，我们切割两个相邻的角。您可以看到下面的悬停动画以了解此技术。三个角等等，对于这种配置，我们需要两个径向渐变、一个圆锥形渐变和两个线性渐变。四个角然后切割所有四个角将需要一个径向渐变和两个线性渐变。你可能会想：“我怎么能记住所有这些案例呢？！”您无需记住任何内容，因为您可以使用在线生成器轻松地为每个案例生成代码。您只需要了解整体技术，而不是每个个案。这就是为什么我只详细介绍了第一批配置——其余的只是调整技巧初始基础的迭代。请注意，我们在整个示例中遵循了一个通用模式：我们在要剪切的角上添加了一个radial-gradient()。我们使用circularconic-gradient()或linear-gradient()填充边以创建最终形状。我们可以找到不同的方法来创建相同的形状。我在这篇文章中展示的是我在尝试许多其他想法后发现的最好的。如果你觉得有更好的方法，欢迎留言分享！成角度的切割接下来我们处理另一种类型的切割形状：成角度的切割。我们有两个参数：切割的大小和角度。为了获得形状，我们需要为每个角使用conic-gradient()。此配置与本文开始的示例非常相似。这是一个角的实现技巧：每个角之间的差异是从position和position额外偏移90deg。完整代码如下：--size:30px;--角度：130度；--g:#0000var(--angle),#0000;mask:conic-gradient(fromcalc(var(--angle)/-2-45deg)attopvar(--size)leftvar(--size),var(--g))topleft,conic-gradient(fromcalc(var(--angle)/-2+45deg)attopvar(--size)rightvar(--size),var(--g))右上角，锥形梯度（从calc(var(--angle)/-2-135deg)在底部var(--size)左var(--size),var(--g))左下角，圆锥梯度（来自calc(var(--angle)/-2+135deg)底部var(--size)右var(--size),var(--g))右下角；面具尺寸：51%51%；掩码重复：不重复；如果我们想禁用一个角，我们将删除该角的锥形梯度()并更新另一个角的大小以填充剩余空间，就像我们对圆形切割所做的那样。下面是一个角的样子：除了CSS掩码，我们还可以使用CSSclip-path属性来切角。每个角都可以用三个点定义。其他角具有相同的值，偏移量为100%。这给了我们总共12点的最终代码——每个角3点。clip-path:polygon(/*左上角*/0T,sizesize,0T,/*OR00*//*右上角*/calc(100%-T)0,calc(100%-size)size,100%T,/*OR100%0*//*右下角*/100%calc(100%-T),calc(100%-size)calc(100%-size),calc(100%-T)100%,/*OR100%100%*//*左下角*/T100%,sizecalc(100%-size),0calc(100%-T)/*OR0100%*/)请注意此代码中的OR注释。它定义了我们要禁用特定角点时必须考虑的代码。为了切入一个角落，我们使用三个点。为了展开一个角，我们使用一个点——它只是那个角的坐标。90deg特殊处理当角度等于90deg时，我们可以优化渐变版本的代码并减少对渐变的依赖。要切割四个角，我们只能使用一种渐变：--size:30px;mask:conic-gradient(atvar(--size)var(--size),#00075%,#00000)00/calc(100%-var(--size))calc(100%-var(--size))对于90deg我们有两种渐变方法，第一种是我们前面详述的切角方法，最后一种是我们使用一个渐变来切割所有角落。我想你知道故事的其余部分：为了解开一些角落，我们将最后一种方法与锥形渐变相结合。正如我所说，没有必要记住所有的方法和技巧。生成器将为您生成代码，我只是试图让这篇文章尽可能详细以涵盖所有可能的情况。最后，我们只是将CSS遮罩与渐变相结合，无需使用大量代码即可创建一些奇特的形状！我们还体验到，需要适当的代码平衡才能获得正确的结果。一路上，我们甚至学会了一些技巧，比如将值改变一个甚至半个单位。CSS超级强大！正如我们所讨论的，我制作的在线生成器是获取所需代码而不是手动编写代码的好地方。看完这篇文章，如果觉得有用记得点赞支持哦。说不定哪天会用到~专注前端开发，分享前端相关技术干货，公众号：南城大学前端（ID：nanchengfe）
