Wie man CSS-schräge Container erstellt

Ich habe mein Portfolio aktualisiert und wollte den Schrägstrich (/) als visuelles Element für das Hauptlayout der Website verwenden. Ich hatte bisher noch nicht versucht, einen schrägen Container in CSS zu erstellen, aber es schien auf den ersten Blick einfach zu sein. Als ich mich jedoch damit beschäftigte, gab es tatsächlich ein paar sehr interessante Herausforderungen, um einen funktionierenden CSS-schrägen Container zu erstellen, der Text und Medien unterstützt.

Hier ist, was ich versucht habe und wo ich schließlich gelandet bin

Ich habe zunächst nach Beispielen für nicht-rechteckige Container gesucht, die es dem Text erlaubten, natürlich darin zu fließen. Ich ging davon aus, dass es mit CSS möglich sein würde, da Programme wie Adobe Illustrator und Microsoft Word dies seit Jahren tun.

Schritt 1: Erstellen Sie einen CSS-schrägen Container mit Transformationen

Ich habe das CSS Shapes Module gefunden, und das funktioniert sehr gut für einfache Textinhalte, wenn wir die Eigenschaft shape-outside verwenden. Es kann den Text sogar vollständig im Blocksatz ausrichten. Aber es ermöglicht nicht das Scrollen von Inhalten *innerhalb* des Containers. Wenn der Benutzer also nach unten scrollt, scheint sich der gesamte schräge Container nach links zu bewegen, was nicht der gewünschte Effekt war. Stattdessen habe ich einen einfacheren Ansatz gewählt, indem ich transform: skew() zum Container hinzugefügt habe.

.slant-container {
  transform: skew(14deg);
}

Das war ein guter Anfang! Der Container war definitiv schräg und das Scrollen funktionierte wie erwartet, während reines CSS die Größenanpassung für Bilder übernahm. Das offensichtliche Problem war jedoch, dass auch der Text und die Bilder schräg wurden, was die Lesbarkeit des Inhalts erschwerte und die Bilder verzerrte.

Schritt 2: Kehren Sie die Schrift um

Ich habe ein paar Versuche unternommen, die Probleme mit schrägem Text und schrägen Bildern mit CSS zu lösen, kam aber schließlich zu einer noch einfacheren Lösung: Erstellen Sie eine neue Schriftart mit FontForge, um die Neigung des Textes umzukehren.

FontForge ist ein Open-Source-Schrifteditor. Ich hatte Roboto Condensed Light für den Hauptinhalt der Website gewählt, also habe ich die .ttf-Datei heruntergeladen und in FontForge geöffnet. Von dort habe ich alle Glyphen ausgewählt und eine Neigung von 14deg angewendet, um die Neigung zu kompensieren, die durch die CSS-Transformation am Container verursacht wurde. Ich habe die neue Schriftdatei als Roboto-Rev-Italic.ttf gespeichert und sie in meinem Stylesheet aufgerufen.

Da haben wir's. Jetzt ist die Schrift in die *entgegengesetzte* Richtung geneigt, um den gleichen Betrag wie die Neigung des Containers, wodurch die Dinge ausgeglichen werden, so dass der Inhalt wie die normale Roboto-Schrift aussieht, die ich ursprünglich verwendet habe.

Schritt 3: Bilder und Videos verfeinern

Das hat für den Text gut funktioniert! Die Textauswahl funktionierte sogar normal. Von dort aus musste ich nur noch die Neigung für Block-Level-Bild- und Videoelemente umkehren, indem ich einen negativen skew()-Wert verwendet habe, der den für den Container angewendeten Wert ausgleicht.

img,
video {
  transform: skew(-14deg);
}

Ich habe Bilder und Videos zwar in zusätzliche Divs verpackt. Auf diese Weise konnte ich ihnen schöne Hintergründe geben, die sich gut mit dem Container quadratisch ausrichten. Was ich getan habe, war, das ::after-Pseudoelement zu verwenden und es mit einem Hintergrund zu positionieren, der über die linken und rechten Ränder des schrägen Containers hinausgeht.

img::after,
video::after {
  content: '';
  display: block;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
}

Finale Demo

Hier ist diese finale Demo noch einmal

Ich verwende diesen Effekt derzeit auf meiner persönlichen Website und liebe ihn bisher. Aber hast du etwas Ähnliches mit einem anderen Ansatz gemacht? Lass es mich unbedingt in den Kommentaren wissen, damit wir uns austauschen können!