网站建设用CSS创建分隔线
在网站建设过程中我们经常会遇到一些有趣的事情，比如在您的网站上有一个花哨的部分分隔线总是很酷。如果我们能让它们反应灵敏且易于调整，那就更好了。今天我们将探索仅使用 CSS 和一些易于操作的优化代码制作的不同部分分隔符。
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: 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));
}
正如我在介绍中所说，我们有一些易于调整的简单代码，可以生成响应式部分分隔符。
相关资讯
阿里云、腾讯云、华为云严选优质服务商
