圆形边框型切角
接下来实现和上面一样形状的纯边框版本。换句话说，我们要实现了相同的形状，但去掉了填充物，只剩下形状的边框。
这相对有些麻烦，在这里会使用很多渐变处理，同时尽可能的精简它们的数量。在这种情况下，将考虑使用伪元素。只显示边框意味着我们需要隐藏形状的内部“填充”。
一个角
如下图所示，则需要一个径向渐变和两个圆锥渐变：
图一说明了径向渐变（红色）和锥形渐变（蓝色和绿色）。图二中，我们将它们全部应用到CSS mask属性中，以创建一个切割角的纯边框形状。
如图所示，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);
在第二种情况下，有两个相邻的角，在这种情况下，我们需要一个径向渐变、一个圆锥渐变和一个线性渐变。
“等等！”你可能会惊呼。“为什么圆锥形渐变会覆盖三面？”。在所有示例中，我们总是使用no-repeat，但在这里，我们可以重复其中之一，以覆盖更多侧面并减少我们使用的渐变数量。所以这里我们使用了repeat-y。
另外一个你可能想知道一个径向渐变是如何切开两个角落的。为此，我们创建了半个圆圈，放在左上角。然后，通过使用负偏移量，我们切割了两个相邻的角落。可以看下方悬停动图了解这个技巧。
三个角
以此类推，对于这种配置，我们需要两个径向渐变、一个圆锥渐变和两个线性渐变。
四个角
那么切割所有四个角落则需要一个径向渐变和两个线性渐变。
你可能会想：“我该怎么记住所有这些箱子？！”你不需要记住任何东西，因为你可以使用在线生成器轻松为每个案例生成代码。您只需要了解整体技巧，而不是每个单独的案例。这就是为什么我只详细介绍了第一批配置——其余的只是调整该技巧初始基础的迭代。
请注意，在整个示例中，我们一直遵循一个总体模式：
我们在要切割的角落上添加一个radial-gradient()。 我们使用圆conic-gradient()或linear-gradient()填充两侧，以创建最终形状。我们可以找到不同的方法来创建相同的形状。我在这篇文章中展示的是我在尝试了许多其他想法后发现最好的方法。如果你认为有更好的方法，欢迎留言分享！
角度切割
接下来我们解决另一种类型的切割形状：角度切割。
我们有两个参数：切割的大小和角度。为了获得形状，我们需要每个角落的conic-gradient()。这种配置与本文启动的示例非常相似。
以下是一个角落的实现技巧：
每个角落之间的差异是from位置和位置的额外偏移量为90deg。完整代码如下所示：
--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注释。它定义了如果我们想禁用特定角落，我们必须考虑的代码。要切入一个角落，我们使用三点。要解开一个角落，我们使用一个点——它只不过是那个角落的坐标。
90deg特殊处理
当角度等于90deg，我们可以优化渐变版本的代码，并依赖更少的渐变。要切割四个角落，我们只能使用一个渐变：
--size: 30px; mask: conic-gradient(at var(--size) var(--size),#000 75%,#0000 0) 0 0/calc(100% - var(--size)) calc(100% - var(--size))
对于90deg，我们有两种渐变方法，第一种是我们之前详细说明了用一个渐变切割每个角落的方法，最后一种是我们使用一个渐变切割所有角落的方法。我想你知道故事的其余部分：为了解开一些角落，我们将最后一种方法与圆锥形渐变相结合。正如我所说，不需要记住所有的方法和技巧。生成器将为您生成代码，我只是试着让这篇文章尽可能详细，以涵盖所有可能的情况。
最后
我们只是将CSS mask与渐变相结合，以创建一些花哨的形状，而无需使用大量代码！我们还体验过，要达到正确的代码平衡才能获得正确的结果。在此过程中，我们甚至学到了一些技巧，例如将值更改为一个甚至半个单位。CSS超级强大！
正如我们所讨论的，我制作的在线生成器是获取您需要的代码的好地方，而不是手工编写。
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
