Get into the habit of writing together! This is the sixth day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .
How to create slanted dividers for your website
Illustration of slanted dividers
In the image above, we have two elements separated by a sloping gap. To achieve this effect, we will cut a section from each one. Let's look at a step-by-step instruction for a better understanding.
Step-by-step instructions for creating a slanted divider
Initially, we put two elements together. We first cut the bottom of the top element (step (2)) using clip-path:
clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - 50px));
复制代码We have a four point path and we will raise the lower left corner a little higher to create a clipping effect. You'll notice that calc(100% - 50px)instead is used 100%.
We do the same for the second element in step (3) using:
clip-path: polygon(0 0,100% 50px,100% 100%,0 100%);
复制代码This time we lowered the top right corner by the same amount of pixels ( 50pxnot 0). If you're not familiar clip-path, here's a diagram for a better look.
Illustration of clipping path points
The points are nothing more than x,y coordinates in 2D space with the range [0 100%]. You can easily identify the four corners and then we can find any other point from there.
Finally, we add a negative number to the second element margin-topto reduce the space and get an equal gap 10px. The final code will be:
.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;
}
复制代码This is the code you'll get from an online generator I made. We can improve it by introducing CSS variables:
: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));
}
复制代码As I said in the introduction, we have some simple code that's easy to tweak to generate responsive section separators.
How to Create Full Width Arrow Dividers for Your Website
Illustration of a full width arrow divider
This is very similar to the previous divider. We will simply deal with more clip-pathpoints.
Step-by-step instructions for creating a full-width arrow divider
I think you probably have this idea by now. We follow the same steps and end up with the following code:
.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值。
You can find many online tools that can help you. My favorite is: https://bennettfeely.com/clippy/
How to create circular dividers for your website
Illustration of a circular divider
For this divider we'll use maskinstead of clip-path. clip-pathand the difference between maskrelying on the maskimage to clip/hide parts of the element. When talking about images, we also talk about gradients.
Here is an illustration to see what kind of gradient we need:
Illustration of a gradient used with the mask property
For the first element, we need two gradients: a linear-gradient()to create a rectangle at the top with a space at the bottom, and a to radial-gradient()create a circle at the bottom. Combining the two will give us the final shape of the first element.
The second element just needs one radial-gradient()to create a hole in the top to complete the puzzle.
Our code will be:
.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;
}
复制代码Using CSS variables it would be:
: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));
}
复制代码Even with the mask method, the code pattern remains the same as with clip-path.
in conclusion
Thanks for reading!