网站制作用CSS创建分隔线

在网站制作过程中我们经常会遇到一些有趣的事情，比如在您的网站上有一个花哨的部分分隔线总是很酷。如果我们能让它们反应灵敏且易于调整，那就更好了。今天我们将探索仅使用 CSS 和一些易于操作的优化代码制作的不同部分分隔符。 在我们深入研究技术部分之前，我已经创建了一个用于部分分隔符的在线生成器。您所要做的就是选择您的配置并立即获取 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)); } 正如我在介绍中所说，我们有一些易于调整的简单代码，可以生成响应式部分分隔符。

转载请保留出处及原文地址:https://www.daojiayun.cn/article/572.html