Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

So erstellen Sie diagonale Linien mit CSS

by
Difficulty:BeginnerLength:ShortLanguages:

German (Deutsch) translation by Evan Kepner (you can also view the original English article)

Vor einigen Tagen erhielt ich meine Einladung zu Google Music. Beim Durchsuchen der App fiel mir ein kleiner, aber ordentlicher Trick auf, mit dem sie mit normalem CSS Registerkarten diagonale Ränder erstellen. Ich werde Ihnen heute zeigen, wie Sie dasselbe in Ihren Projekten tun können!


Bevorzugen Sie ein Video-Tutorial?


Schritt 1: Das Markup

Wir beginnen mit einem einfachen Markup.

Wir werden diese Demo so einfach wie möglich halten.

bare markup

Schritt 2

Als nächstes wenden wir nur für das Layout eine Hintergrundfarbe und einen gewissen Abstand auf das body Element an.

Spacing

Schritt 3

Jetzt werden wir den Ankertag etwas stylen - eine neue Farbe anwenden, sie fett machen, einige Ränder hinzufügen usw.

Style the anchor tag

Beachten Sie, dass beim Festlegen großer Randbreiten an dem Schnittpunkt der beiden eine diagonale Linie erstellt wird. Ich frage mich, ob wir diesen Schnittpunkt als Tabulatorkante verwenden können. Versuchen wir, height auf Null zu reduzieren.

Zero height

Rück näher! Wenn wir jetzt die Zeilenhöhe des Ankertags anpassen, können wir den Text möglicherweise in dieses Feld einfügen!

Adjusting the line height

Schritt 4

Wir haben es geschafft! Aber diesen hässlichen roten Rand auf der rechten Seite brauchen wir natürlich nicht. Gibt es eine Möglichkeit anzugeben, dass die Hintergrundfarbe des body erhalten werden soll, ohne den Hex-Wert erneut anzugeben? Ja! Zu diesem Zweck verwenden wir das transparent Schlüsselwort.

Transparent Borders

Schritt 5

Das offensichtliche Problem an dieser Stelle ist, dass es etwas seltsam aussieht, wenn sich der Hintergrund über die gesamte Breite des Containers erstreckt. Der natürliche Instinkt würde meinen, das display auf inline zu aktualisieren. Wie das folgende Bild zeigt, funktioniert dies jedoch nicht.

display inline

Wir brauchen das Element, um seine block-artige Natur beizubehalten, damit es die Höhe 0 einhält. Die Antwort auf dieses Dilemma besteht darin, display: inline-block; zu verwenden oder das Ankertag mit float schweben zu lassen und dann die darauf folgenden Elemente mit clear zu löschen. Wir werden das erstere verwenden.

Viel besser!


Schritt 6

Zuletzt lassen Sie uns das div darunter ein wenig stylen, und wir sind fast fertig!

Uh oh
In Safari
In Firefox

Oh oh. Wir haben ein Problem. Es sieht so aus, als ob Firefox und Webkit sich nicht genau einig sind, wie Elemente mit Nullhöhen und Anzeigen mit inline-block gerendert werden sollen.

Zugegeben hat mich dieses etwas ratlos gemacht. Ohne auf Hacks zurückzugreifen, konnte ich Firefox und Chrome nicht dazu bringen, das Layout genau zu rendern. Wenn Sie einen Weg finden, lassen Sie es mich in den Kommentaren wissen! Update - Informationen zur Problemumgehung finden Sie in den Kommentaren.


Schritt 7

Es gibt Möglichkeiten, Webkit-Browser mit CSS anzusprechen, aber es ist wichtig zu beachten, dass solche Tricks nur in Situationen des letzten Auswegs verwendet werden sollten. Mit anderen Worten, Kinder versucht dies nicht zu Hause, (es sei denn, ihr müsst). In unserer Situation scheint es klüger zu sein,floats zu verwenden, um dieses Layout zu erreichen. Lassen Sie uns dennoch etwas riskieren und mit einigen alternativen Techniken experimentieren.

Vielen ist nicht bewusst, dass Medienabfragen für Webkit-Browser verwendet werden können. Beobachten Sie, was passiert, wenn wir eine Webkit-spezifische Eigenschaft als Bedingung für die Medienabfrage verwenden ...

Tada! Es klappt. Denken Sie jedoch daran - greifen Sie nur nach diesem Trick, wenn Sie keine andere Option haben!


Das Endprodukt

Final Product

Es ist eine recht einfache Technik, aber dennoch eine, die wir alle in unseren Werkzeugkasten haben sollten. Haben Sie in Ihren Projekten solche netten Tricks angewendet? Lassen Sie es mich in den Kommentaren wissen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.