So erstellen Sie schiefe Kanten mit CSS

In diesem Beitrag werden wir uns ansehen, wie wir einen schrägen Kanteneffekt (horizontal) auf einer Webseite erzeugen können. Im Grunde sieht es ungefähr so ​​aus:

Eine leicht angewinkelte Kante sollte unser Web-Layout weniger starr und langweilig erscheinen lassen. Um diesen Trick auszuführen, verwenden wir die Pseudo-Elemente ::before und ::after und CSS3 Transform .

Verwenden von Pseudoelementen

Diese Technik verwendet die Pseudo-Elemente ::before und ::after um die Elementkanten zu winkeln. In diesem Beispiel passen wir die untere Kante an.

 .block {Höhe: 400px; Breite: 100%; Position: relativ; Hintergrund: linear-gradient (nach rechts, rgba (241, 231, 103, 1) 0%, rgba (254, 182, 69, 1) 100%); } .block :: nach {content: ''; Breite: 100%; Höhe: 100%; Position: absolut; Hintergrund: erben; Z-Index: -1; unten: 0; Transformationsursprung: links unten; transform: skewY (3deg); } 

Lassen Sie uns rekapitulieren.

Der transform-origin gibt die Koordinaten des Elements an, das transformiert werden soll. Im obigen Beispiel haben wir left bottom dass die Startkoordinaten auf die untere linke Seite des Blocks gesetzt werden.

Die transform: skewY(3deg); macht den ::after Block Skew oder Winkel um 3 Grad. Da wir die Startkoordinate als unten links angegeben haben, erhöht die untere rechte Ecke des Blocks 3 Grad. Wenn wir den transform-origin nach right bottom und die untere linke Ecke stattdessen um 3 Grad erhöhen.

Sie können einen einfarbigen Hintergrund oder Farbverlauf hinzufügen, um das Ergebnis zu sehen.

Mach es einfacher mit Sass Mixin

Um das zu vereinfachen, habe ich ein Sass-Mixin erstellt, um die angewinkelten Kanten hinzuzufügen, ohne die Schwierigkeiten mit der Komplexität der Style-Regeln zu bewältigen. Mit dem folgenden Mix können Sie schnell die Seite - oben links, oben rechts, unten links oder unten rechts - angeben, um zu verzerren.

 @mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) {width: 100%; Position: relativ; Hintergrund: linear-gradient (nach rechts, rgba (241, 231, 103, 1) 0%, rgba (254, 182, 69, 1) 100%); & :: vor, & :: nach {content: ''; Breite: 100%; Höhe: 100%; Position: absolut; Hintergrund: erben; Z-Index: -1; Übergang: alle .5s erleichtern; } @if $ pos-top {& :: vor {@if $ pos-top == 'topleft' {top: 0; Transformationsursprung: rechts oben; transform: skewY ($ angle-top); } @if $ pos-top == 'topright' {oben: 0; Transformationsursprung: links oben; transform: skewY (- $ winkel-top); }}} @if $ pos-btm {& :: nach {@if $ pos-btm == 'bottomleft' {bottom: 0; Transform-Herkunft: rechts unten; transform: skewY (- $ winkel-btm); } @if $ pos-btm == 'unten rechts' {unten: 0; Transformationsursprung: links unten; transform: skewY ($ angle-btm); }}}} 

Es gibt vier Variablen im Mixin. Die ersten beiden Variablen $pos-top und $angle-top geben die oberste Startkoordinate und den Grad an . Die letzten beiden Variablen geben die Koordinate und den Grad für die Unterseite an .

Wenn Sie alle vier Variablen ausfüllen, können Sie beide Seiten - oben und unten - des Elements anwinkeln.

Verwenden Sie die Sass @include Syntax, um das Mixin in ein Element einzufügen. Sie können Beispiele unten sehen:

So fügen Sie eine schräge Kante oben links hinzu :

 .block {@einschließen Winkelkante (topleft, 3deg); } 

So fügen Sie eine schräge Kante auf der unteren rechten Seite hinzu:

 .block {@include angle-edge (unten rechts, 3deg); } 

So fügen Sie eine schräge Kante oben links und unten rechts hinzu :

 .block {@include angle-edge (topleft, 3deg, bottomright, 3deg); } 

Unten ist das Demo mit den Mixins aufgetragen. Ändern Sie das Auswahlfeld, um zu einem anderen Stil zu wechseln.

Das ist es!

7 Möglichkeiten, Ihre Produktivität erheblich zu steigern

Im Jahr 1915 präsentierte Albert Einstein seine brillante und revolutionäre Relativitätstheorie. In den drei Jahren zuvor hatte er sich völlig seiner Schöpfung verschrieben, ohne sich von etwas anderem ablenken zu lassen. Wir schlagen nicht vor, dass Sie drei Jahre an einem bestimmten Projekt arbeiten (es sei denn, Sie möchten das wirklich tun), aber dieser Ansatz, sich vollständig auf ein Werk zu konzentrieren, ist eine lebendige Illustration des neuen Arbeitstrends " Doing Less".Wie de

(Tech- und Design-Tipps)

Erstellen Sie Online Video Präsentationen einfach mit Moveote

Präsentationen sind eine großartige Möglichkeit, Dinge zu erklären und wichtige Informationen einem Publikum zu vermitteln. Es gibt jedoch Zeiten, in denen es unmöglich ist, eine Präsentation in Echtzeit zu halten, sei es aufgrund von Distanz oder einfach wegen Zeitmangels. Sicher, Sie könnten Ihre Folien einfach per E-Mail versenden oder online veröffentlichen, aber ohne das alles entscheidende menschliche Element kann es schwierig sein, zu kommunizieren und Ihre Meinung zu vermitteln. Wenn S

(Tech- und Design-Tipps)