So erstellen Sie diagonale Linien mit CSS

() translation by (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 Ränder erstellen. Ich werde Ihnen heute zeigen, wie Sie dasselbe in Ihren Projekten tun können!

Bevorzugen Sie ein Video-Tutorial?

Schritt 1: Das Markup

Wir beginnen mit einem einfachen Markup.



<!DOCTYPE html> 
 
<html lang="en"> 
<head> 
   <meta charset="utf-8"> 
   <title>Demo</title> 
</head> 
<body> 
	<a href="#">New Music</a> 
	<div> 
		<h3> Hello, Everyone! </h3> 
		<p> 
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p> 
	</div> 
</body> 
</html>

Wir werden diese Demo so einfach wie möglich halten.

Schritt 2

Als nächstes wenden wir nur für das Layout eine Hintergrundfarbe und einen gewissen Abstand auf das body Element an.


body {
	background: #e3e3e3;
	font-family: sans-serif;
	width: 400px;
	margin: 100px auto;
}

Schritt 3

Jetzt werden wir den Ankertag etwas stylen - eine neue Farbe anwenden, sie fett machen, einige Ränder hinzufügen usw.


a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c; 
}

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 können. Versuchen wir, height auf Null zu reduzieren.


a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c;

   height: 0;
}

Rück näher! Wenn wir jetzt die Zeilenhöhe des Ankertags anpassen, können wir den Text möglicherweise in dieses Feld einfügen!


a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}

Schritt 4

Wir haben es geschafft! Aber diesen hässlichen roten Rand auf der rechten Seite brauchen wir natürlich nicht. Gibt es eine Möglichkeit anzugeben, dass die Hintergrundfarbe des body erhalten werden soll, ohne den Hex-Wert erneut anzugeben? Ja! Zu diesem Zweck verwenden wir das transparent Schlüsselwort.


a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid transparent;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}

Schritt 5

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

Wir brauchen das Element, um seine block-artige Natur beizubehalten, damit es die Höhe 0 einhä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 löschen. Wir werden das erstere verwenden.


a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: inline-block;
	
	border-right: 30px solid transparent;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}

Viel besser!

Schritt 6

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


div {
	 border: 1px solid #4c4c4c;	
	 border-top: 3px solid #4c4c4c;	   	 
	 padding: 20px;
}

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 Nullhöhen und Anzeigen mit inline-block gerendert werden sollen.

Zugegeben hat mich dieses etwas ratlos gemacht. Ohne auf Hacks zurü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 Mö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 müsst). In unserer Situation scheint es klü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 für Webkit-Browser verwendet werden können. Beobachten Sie, was passiert, wenn wir eine Webkit-spezifische Eigenschaft als Bedingung für die Medienabfrage verwenden ...


@media screen and (-webkit-animation) {
	a {
		margin-bottom: -4px;
	}
}

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

Das Endprodukt

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!