Erstelle diagonale Layouts wie im Jahr 2020

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Nils Binder beschreibt die Wege

1. Verwenden Sie eine SVG in Form eines Dreiecks. Diese Technik wird von Erik Kennedy auf CSS-Tricks schön beschrieben.

2. Verbirg einen Teil deines Abschnitts mit clip-path. Lies Diagonale Container in CSS von Sebastiano Guerriero oder Schräge Kanten mit konstantem Winkel in CSS von Kilian Valkhof.

3. Verwendung von CSS Transforms

Normalerweise wäre ich Typ #2 – oben und unten ein wenig abschneiden, sicherstellen, dass genügend Polsterung vorhanden ist, und fertig. Aber Nils hat mich fast davon überzeugt, dass diese schicke Mathematik besser ist.

Hier ist eine etwas dumme clip-path Methode

Und Nils unglaublich schicke Spielwiese

Direkter Link →

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. Chris Coyier
    Permalink zum Kommentar#

    Ach ja, und wo wir gerade von coolen Operatoren sprechen…

    https://getwaves.io/

    https://wweb.dev/resources/css-separator-generator

  2. Antoine
    Permalink zum Kommentar#

    Hallo,

    Vielleicht besteht keine Notwendigkeit für die „manuelle“ (oder JavaScript-seitige) Vorberechnung der Tangenten-basierten magischen Zahl in Nils' großartigem Beispiel?

    --skew_deg: -10; /* Specify angle here */

--a: calc(var(--skew_deg) * 3.14159 / 180); /* Deg to rad without unit */

--angle: calc(1rad * var(--a)); /* Keep the previous angle var */

/* Now compute the magic number in css, using taylor serie */

--magic-number: max(calc((var(--a) + (1 * var(--a) * var(--a) * var(--a) / 3) + (2 * var(--a) * var(--a) * var(--a) * var(--a) * var(--a) / 15)) / 2), calc((var(--a) + (1 * var(--a) * var(--a) * var(--a) / 3) + (2 * var(--a) * var(--a) * var(--a) * var(--a) * var(--a) / 15)) / -2));

    Ich vermeide JavaScript, wenn ich kann.
    Ich bin überhaupt kein Experte, daher hoffe ich, dass mein Kommentar kein furchtbarer Vorschlag ist ;).

  3. Frank Conijn
    Permalink zum Kommentar#

    Nils' Methode des Verzerrungs (skewing) ist besser, wenn der Text ebenfalls verzerrt werden soll. Das ist eigentlich die einzige Methode dafür.

    Wenn der Text jedoch horizontal bleiben soll, finde ich die clip-path Methode viel einfacher. Das ist einfach eine Frage des Verständnisses der Polygon-Variante, was recht einfach ist: vier Ecken, jeweils mit einer horizontalen und einer vertikalen Variable.

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.

© .