如何使用 CSS 创建分区分隔线

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

在你的网站上有一个花哨的部分分隔线总是很酷。如果我们能让它们反应灵敏且易于调整，那就更好了。这就是你将在本文中学到的内容。

我们将探索仅使用 CSS 和一些易于操作的优化代码制作的不同部分分隔符。

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

倾斜分隔线的插图

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

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

最初，我们将两个元素放在一起。

我们首先使用如下方式切割顶部元素的底部（步骤（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));
}

以上是有效的 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 的代码模式相同。

结论

现在，除了拥有一个很酷的分区分割器在线生成器之外，你还知道创建它们背后的原理。

请将此链接添加为书签：https ://css-generators.com/ 并在 Twitter 上。

感谢你的阅读！