Machen Sie es sich zur Gewohnheit, gemeinsam zu schreiben! Dies ist der sechste Tag meiner Teilnahme an der „Nuggets Daily New Plan · April Update Challenge“, klicken Sie hier, um die Details der Veranstaltung anzuzeigen .
So erstellen Sie schräge Trennwände für Ihre Website
Abbildung von schrägen Trennwänden
Im obigen Bild haben wir zwei Elemente, die durch eine schräge Lücke getrennt sind. Um diesen Effekt zu erzielen, schneiden wir von jedem einen Abschnitt ab. Schauen wir uns zum besseren Verständnis eine Schritt-für-Schritt-Anleitung an.
Schritt-für-Schritt-Anleitung zum Erstellen einer schrägen Trennwand
Zunächst haben wir zwei Elemente zusammengefügt. Wir schneiden zuerst die Unterseite des oberen Elements (Schritt (2)) mit clip-path:
clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - 50px));
复制代码Wir haben einen Pfad mit vier Punkten und heben die untere linke Ecke etwas höher an, um einen Clipping-Effekt zu erzeugen. Sie werden feststellen, dass calc(100% - 50px)stattdessen verwendet wird 100%.
Wir machen dasselbe für das zweite Element in Schritt (3) mit:
clip-path: polygon(0 0,100% 50px,100% 100%,0 100%);
复制代码Dieses Mal haben wir die obere rechte Ecke um die gleiche Anzahl von Pixeln abgesenkt ( 50pxnicht 0). Wenn Sie nicht vertraut clip-pathsind, hier ist ein Diagramm für einen besseren Überblick.
Illustration von Beschneidungspfadpunkten
Die Punkte sind nichts anderes als x,y-Koordinaten im 2D-Raum mit der Reichweite [0 100%]. Sie können die vier Ecken leicht identifizieren und dann können wir von dort aus jeden anderen Punkt finden.
Schließlich fügen wir dem zweiten Element eine negative Zahl hinzu margin-top, um den Abstand zu verringern und eine gleiche Lücke zu erhalten 10px. Der endgültige Code lautet:
.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;
}
复制代码Dies ist der Code, den Sie von einem von mir erstellten Online-Generator erhalten. Wir können es verbessern, indem wir CSS-Variablen einführen:
: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));
}
复制代码Wie ich in der Einleitung gesagt habe, haben wir einen einfachen Code, der leicht zu optimieren ist, um ansprechende Abschnittstrennzeichen zu generieren.
So erstellen Sie Pfeilteiler in voller Breite für Ihre Website
Abbildung eines Pfeilteilers in voller Breite
Dies ist dem vorherigen Teiler sehr ähnlich. Wir behandeln einfach mehr clip-pathPunkte.
Schritt-für-Schritt-Anleitung zum Erstellen eines Pfeilteilers in voller Breite
Ich denke, Sie haben diese Idee wahrscheinlich schon. Wir folgen den gleichen Schritten und erhalten am Ende den folgenden 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值。
Sie können viele Online-Tools finden, die Ihnen helfen können. Mein Favorit ist: https://bennettfeely.com/clippy/
So erstellen Sie kreisförmige Trennwände für Ihre Website
Abbildung eines kreisförmigen Teilers
Für diesen Teiler verwenden wir maskanstelle von clip-path. clip-pathund den Unterschied zwischen dem maskVerlassen auf das maskBild zum Ausschneiden/Ausblenden von Teilen des Elements. Wenn wir von Bildern sprechen, sprechen wir auch von Farbverläufen.
Hier ist eine Illustration, um zu sehen, welche Art von Farbverlauf wir brauchen:
Illustration eines Farbverlaufs, der mit der Maskeneigenschaft verwendet wird
Für das erste Element benötigen wir zwei Farbverläufe: einen linear-gradient(), um oben ein Rechteck mit einem Leerzeichen unten zu erstellen, und einen, radial-gradient()um unten einen Kreis zu erstellen. Die Kombination der beiden ergibt die endgültige Form des ersten Elements.
Das zweite Element benötigt nur eins radial-gradient(), um ein Loch in der Oberseite zu erstellen, um das Puzzle zu vervollständigen.
Unser Code wird sein:
.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;
}
复制代码Mit CSS-Variablen wäre es:
: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));
}
复制代码Auch bei der Maskenmethode bleibt das Codemuster dasselbe wie bei Clip-Path.
abschließend
Danke fürs Lesen!