So erstellen Sie schräge Kanten mit CSS
In diesem Beitrag werden wir uns ansehen, wie wir einen abgewinkelten Kanteneffekt (horizontal) auf einer Webseite erstellen können. Im Grunde sieht es so aus:
Durch eine leicht angewinkelte Kante sollte unser Web-Layout weniger starr und matt aussehen. Für diesen Trick verwenden wir die Pseudoelemente ::Vor und ::nach dem und CSS3-Transformation.
Verwendung von Pseudoelementen
Diese Technik verwendet die Pseudoelemente ::Vor und ::nach dem um die Elementkanten abzuwinkeln. In diesem Beispiel werden wir die untere Kante anpassen.
.Block Höhe: 400px; Breite: 100%; Position: relativ; Hintergrund: linearer Gradient (nach rechts, rgba (241.231.103,1) 0%, rgba (254.182,69,1) 100%); .block :: after content: "; width: 100%; height: 100%; position: absolute; background: erben; z-index: -1; bottom: 0; transform-origin: left bottom; transform: skewY (3deg);
Lassen Sie uns rekapitulieren.
Das Ursprung verwandeln gibt die Koordinaten des zu transformierenden Elements an. Im obigen Beispiel haben wir angegeben links unten Dadurch werden die Startkoordinaten unten links im Block platziert.
Das verwandeln: schräg (3deg); macht das ::nach dem Blockversatz oder Winkel bei 3 Grad. Da wir die Startkoordinate als links unten angegeben haben, erhöht sich die untere rechte Ecke des Blocks um 3 Grad. Wenn wir das tauschen Ursprung verwandeln zu rechts unten und die linke untere Ecke wird stattdessen um 3 Grad angehoben.
Sie können einen einfarbigen Hintergrund oder einen Farbverlauf hinzufügen, um das Ergebnis anzuzeigen.
Machen Sie es mit Sass Mixin einfacher
Um dies zu vereinfachen, habe ich ein Sass-Mixin erstellt, um die angewinkelten Kanten hinzuzufügen, ohne die Kopfschmerzen aufgrund der Komplexität von Stilregeln zu berücksichtigen. Mit dem folgenden Mixin können Sie schnell die Seite - oben links, oben rechts, unten links oder unten rechts - für die Neigung festlegen.
@mixin Winkelkante ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) width: 100%; Position: relativ; Hintergrund: linearer Gradient (nach rechts, rgba (241.231.103,1) 0%, rgba (254.182,69,1) 100%); & :: before, & :: after content: "; width: 100%; height: 100%; position: absolute; background: erben; z-index: -1; Übergang: alle 0,5 s; @if $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; transform-origin: oben rechts; transform: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; transform-origin: left oben; transform: skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: right bottom; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' bottom: 0; transform-origin: left bottom; transform: skewY ($ angle-btm);
Es gibt vier Variablen im Mixin. Die ersten beiden Variablen, $ pos-top und $ angle-top, Präzisiere das obere Startkoordinate und das Grad. Die letzten beiden Variablen geben die Koordinate und das Grad für die Unterseite Seite.
Wenn Sie alle vier Variablen auffüllen, können Sie beide Seiten des Elements nach oben und nach unten neigen.
Verwenden Sie den Sass @umfassen Syntax, um das Mixin in ein Element einzufügen. Sie können Beispiele unten sehen:
Hinzufügen einer schiefen Kante oben links Seite:
.Block @inkleine Winkelkante (oben links, 3deg);
Hinzufügen einer schiefen Kante unten rechts Seite:
.Block @ Winkelkante einschließen (unten rechts, 3deg);
Hinzufügen einer schiefen Kante oben links und unten rechts Seite:
.Block @include Winkelkante (oben links, 3deg, unten rechts, 3deg);
Unten ist die Demo mit den angewendeten Mixins. Ändern Sie das Auswahlfeld, um zu einem anderen Stil umzuschalten.
Das ist es!
