CSS 创建分区分隔线

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

如何为你的网站创建倾斜分隔线

倾斜分隔线的插图

在上图中，我们有两个元素以倾斜的间隙分开。为了达到这个效果，我们将从每一个中切下一部分。让我们看一个分步说明，以便更好地理解。

创建倾斜分隔线的分步说明

最初，我们将两个元素放在一起。我们首先使用如下方式切割顶部元素的底部（步骤（2））clip-path：

clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - 50px));
复制代码

我们有一个四点路径，我们将左下角稍微高一点以创建剪切效果。你会注意到使用了calc(100% - 50px)代替100%。

我们使用以下方法对步骤 (3) 中的第二个元素执行相同操作：

clip-path: polygon(0 0,100% 50px,100% 100%,0 100%);
复制代码

这次我们将右上角降低了相同数量的像素（50px而不是0）。如果你不熟悉clip-path，这里有一个图可以更好地看点。

剪辑路径点的插图

这些点只不过是二维空间中的 x,y 坐标，范围为[0 100%]。你可以轻松识别四个角，然后我们可以从那里找到任何其他点。

最后，我们在第二个元素上加上一个负数margin-top来减少空间并得到一个等于 的间隙10px。最终代码将是：

.top {
  clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - 50px));
}
.bottom {
  clip-path: polygon(0 0,100% 50px,100% 100%,0 100%);
  margin-top: -40px;
}
复制代码

这就是你将从我制作的在线生成器中获得的代码。我们可以通过引入 CSS 变量来改进它：

:root {
  --size: 50px; /* size of the cut */
  --gap: 10px;  /* the gap */
}
.top {
  clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--size)));
}
.bottom {
  clip-path: polygon(0 0,100% var(--size),100% 100%,0 100%);
  margin-top: calc(var(--gap) - var(--size));
}
复制代码

正如我在介绍中所说，我们有一些易于调整的简单代码，可以生成响应式部分分隔符。

如何为你的网站创建全宽箭头分隔线

全角箭头分隔线的插图

这与之前的分隔线非常相似。我们将简单地处理更多的clip-path点。

创建全宽箭头分隔线的分步说明

我想你现在可能已经有了这个想法。我们遵循相同的步骤，并以以下代码结束：

.top {
  clip-path: polygon(0 0,100% 0,100% calc(100% - 50px),50% 100%,0 calc(100% - 50px));
}
.bottom {
  clip-path: polygon(0 0,50% 50px,100% 0,100% 100%,0 100%);
  margin-top: -40px;
}
复制代码

下面是另一个插图，以了解我们用于此部分分隔符的新点。

剪辑路径点的插图

乍一看，它可能看起来很困难，但它真的很容易。

我们通过链接元素的 2D 空间内的不同点来创建形状。诀窍是创建 2 个“拼图形状”（我刚刚创造了这个术语）来创建部分分隔线的错觉。通过一些练习，你可以按照相同的逻辑轻松创建分隔线。

在我们进入下一个之前，这里是使用 CSS 变量的代码：

:root {
  --size: 50px; /* size of the cut */
  --gap: 10px;  /* the gap */
}
.top {
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--size)),50% 100%,0 calc(100% - var(--size)));
}
.bottom {
  clip-path: polygon(0 0,50% var(--size),100% 0,100% 100%,0 100%);
  margin-top: calc(var(--gap) - var(--size));
}
复制代码

你已经可以在我们的分隔符的代码中看到一个模式，因为我们使用的是相同的技术。两个clip-path、一个负数margin-top和两个 CSS 变量。就如此容易！

如何为你的网站创建箭头分隔线

箭头分隔线的插图

这个分隔线比前面的要复杂一些，因为我将添加另一个变量，即箭头的角度。该技术保持不变，但我们将有更多的数学来计算点的坐标。

对于这个，我的在线生成器将非常有用（特别是如果你对数学公式不满意），因此你可以轻松获得最终值而不会遇到麻烦。

对于好奇的人，这里是通用代码：

:root {
  --size: 50px;   /* size of the cut */
  --gap: 10px;    /* the gap */
  --angle: 90deg; /* angle of the arrow */
}
.top {
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--size)),calc(50% + tan(var(--angle)/2)*var(--size)) calc(100% - var(--size)),50% 100%,calc(50% - tan(var(--angle)/2)*var(--size)) calc(100% - var(--size)),0 calc(100% - var(--size)));
}
.bottom {
  clip-path: polygon(0 0,calc(50% - tan((180deg - var(--angle))/4)*var(--gap) - tan(var(--angle)/2)*var(--size)) 0,50% calc(var(--size) + (1/sin(var(--angle)/2) - 1)*var(--gap)),calc(50% + tan((180deg - var(--angle))/4)*var(--gap) + tan(var(--angle)/2)*var(--size)) 0,100% 0,100% 100%,0 100%);
  margin-top: calc(var(--gap) - var(--size));
}
复制代码

我可以听到你看到这个尖叫，但如果你不完全理解它也不要担心。我仍在使用创建不同的形状，clip-path但这次计算有点复杂。

以上是有效的 CSS 代码，但在撰写本文时，不支持三角函数，因此它无法在任何浏览器中运行。你可以手动计算值，也可以使用在线生成器获取clip-path值。

到目前为止，我们已经使用相同的技术制作了 3 种不同的分隔线。每次我们通过玩clip-path值来考虑新的形状。你可以使用相同的技术创建任何分隔线，并且组合是无限的。你的想象力是唯一的限制。

熟悉 是一个很好的练习clip-path。我建议使用笔和纸来绘制你想要的形状。你可以识别形状的不同点。然后将它们转换为clip-path值。

你可以找到很多可以帮助你的在线工具。我最喜欢的是：https ://bennettfeely.com/clippy/

如何为你的网站创建圆形分隔线

圆形分隔线的插图

对于这个分隔线，我们将使用mask而不是clip-path. clip-path和之间的区别在于mask依赖mask图像来剪切/隐藏元素的某些部分。在谈论图像时，我们还谈论渐变。

这是一个插图，以了解我们需要什么样的渐变：

与 mask 属性一起使用的渐变的插图

对于第一个元素，我们需要两个渐变：alinear-gradient()在顶部创建一个矩形，在底部留出一个空间，以及 a 在底部radial-gradient()创建一个圆形。两者结合起来将为我们提供第一个元素的最终形状。

第二个元素只需要一个radial-gradient()在顶部创建一个洞来完成拼图。

我们的代码将是：

.top {
  mask: 
    linear-gradient(#000 0 0) top/100% calc(100% - 50px) no-repeat,
    radial-gradient(farthest-side,#000 98%,#0000) bottom/100px 100px no-repeat;
}
.bottom {
  mask: radial-gradient(60px at 50% -10px,#0000 98%,#000);
  margin-top: -40px;
}
复制代码

使用 CSS 变量，它将是：

:root {
  --size: 50px; /* size of the cut */
  --gap: 10px;  /* the gap */
}
.top {
  mask: 
    linear-gradient(#000 0 0) top/100% calc(100% - var(--size)) no-repeat,
    radial-gradient(farthest-side,#000 98%,#0000) bottom/calc(2*var(--size)) calc(2*var(--size)) no-repeat;
}
.bottom {
  mask: radial-gradient(calc(var(--gap) + var(--size)) at 50% calc(-1*var(--gap)),#0000 98%,#000);
  margin-top: calc(var(--gap) - var(--size));
}
复制代码

即使使用 mask 方法，代码模式仍然与使用 clip-path 的代码模式相同。

结论

感谢你的阅读！