In CSS sind Linien meistens horizontal oder vertikal. Mit CSS -Eigenschaften können Sie jedoch die Position der Linien ändern. Im Kontext von CSS ist eine diagonale Linie nur eine Drehung einer horizontalen Linie in einem Winkel von 45 Grad oder -45 Grad. Dies ist mit Hilfe des CSS möglich “verwandeln" Eigentum.

Diese Anleitung zeigt, wie das CSS verwendet wird “verwandelnEigenschaft zum Zeichnen einer diagonalen Linie.

Wie man diagonal in css zeichnet?

Eine Diagonale in CSS zeichnen, die “verwandelnEigenschaft wird verwendet. Erstens werden wir über die “diskutieren“verwandelnEigenschaft, damit Sie es besser verstehen können.

Was ist die "Transform" -Spertion in CSS?

In CSS, die “verwandeln”Eigenschaft wird für die 2D- und 3D -Transformation von HTML -Elementen verwendet. Mit dieser Eigenschaft kann ein Element gedreht, bewegt, verzerrt und skaliert werden. Insbesondere können Sie die Transformationseigenschaft zum Zeichnen einer diagonalen Linie mit CSS verwenden.

Syntax

Die Syntax der Transformationseigenschaft lautet:

Transformation: Keine | Transformationsfunktionen

Die Beschreibung der oben genannten Werte ist unten angegeben:

• keiner: Es wird verwendet, um die Transformation eines Elements einzuschränken.
• Transformationsfunktionen: Es wird verwendet, um verschiedene Funktionen wie Drehen, Drehen (), Scale (), Move () und Skew () aufzurufen.

Schauen wir uns einige praktische Beispiele zum Zeichnen einer diagonalen Linie bei 45 und -45 Grad an.

Beispiel 1: Zeichnen Sie eine diagonale Linie mit 45 Grad mit CSS

Erstellen Sie zunächst eine leere DIV im HTML -Abschnitt, um eine diagonale Linie hinzuzufügen. In unserem Fall haben wir eine Überschrift hinzugefügt

und ein .

Html

Diagonale Linie

Gehen Sie nun zum CSS -Abschnitt, um eine diagonale Linie hinzuzufügen.

In CSS haben wir benutzt “div”Zu Zugang zum erstellten Container in der HTML. Als nächstes wenden Sie das an “Grenzboden"Eigentum zu ihm und setzen Sie die Werte der Grenze als"3px","solide", Und "RGB (255, 0, 0)", bzw. Verwenden Sie dann das “BreiteEigenschaft im nächsten Schritt und setzen Sie die Werte als "40%”. Zuweisen Sie außerdem den Wert der Transformationseigenschaft als “drehen (45 Grad)"Und das Transform-Origin-Eigenschaft als"linksUm die diagonale Linie ab links zu zeichnen.

CSS

div
Grenzboden: 3px fester RGB (255, 0, 0);
Breite: 45%;
Transformation: Drehen (45 Grad);
Transform-Origin: Links;

Notiz: Hier das "Transform-OriginDie Eigenschaft wird verwendet, um die Position der Diagonal entlang der X-Achse und der Y-Achse festzulegen.

Infolge des oben genannten Erwähnungscode sehen Sie die folgende Ausgabe:

Beispiel 2: Zeichnen Sie eine diagonale Linie bei -45 Grad mit CSS

In diesem Beispiel zeichnen wir eine diagonale Linie mit einem “-45 Grad" Winkel. Wechseln Sie zu diesem Zweck in den CSS-Abschnitt und ändern.

Hier setzen wir den Wert der Transformationseigenschaft als "-45 Grad"Und Transform-Origin als" als "Rechts”.

CSS

div
Grenzboden: 3px fester RGB (0, 47, 255);
Breite: 45%;
Transformation: Drehen (-45 Grad);
Transform-Ursprung: Recht;

Speichern Sie den Code, gehen Sie zur HTML -Datei und führen Sie ihn aus, um das folgende Ergebnis zu sehen:

Das übergegebene Bild zeigt an, dass die Transformationseigenschaft erfolgreich implementiert wird. Ich möchte eine Linie in einer Box zeichnen? Schauen Sie sich das nächste Beispiel an!

Beispiel: Zeichnen Sie mit CSS eine diagonale Linie in die Box

Um eine Diagonale in die Box zu zeichnen, erstellen Sie eine Box und zeichnen Sie dann eine Diagonale darin. Dazu werden wir eine Überschrift hinzufügen und einen Div -Klassennamen erstellen “Kasten"Und erstellen Sie dann einen weiteren Div in seinem Klassennamen"Linie”.

Html

Diagonale Linie

Gehen Sie nun in die CSS, um eine Diagonale in die Box zu zeichnen. Geben Sie die Werte der Breite und der Höheneigenschaften als “an300px”. Fügen Sie danach einen Rand um die DIV mit der Grenzeigenschaft hinzu und setzen Sie ihre Werte als "5px","solide", Und "RGB (202, 33, 75)”.

CSS

.Kasten
Breite: 300px;
Höhe: 300px;
Grenze: 5px fester RGB (202, 33, 75);

Dies zeigt das folgende Ergebnis:

Gehen Sie als nächstes zum zweiten Div auf und rufen Sie die auf “calc ()”Funktion zur Berechnung der Länge der Diagonal gemäß der Größe der Quadratkaste. Verwenden Sie dazu die Formel von Diagonal im Quadrat “Seite*√2", Wo der Wert von √2 ist"1.41", Und die Seite des Quadrats ist"300px”.

Setzen Sie außerdem den Wert des Grundstücks für Grenzboden als "als" als "3px","solide", Und "RGB (1, 68, 12)", bzw. Zuletzt den Wert der Transformationseigenschaft als “zuweisen“drehen (45 Grad)"Und das Transform-Origin-Eigenschaft als"linksUm die diagonale Linie zu zeichnen.

CSS

.Linie
Breite: Calc (300px*1.41);
Grenzboden: 3px fester RGB (1, 68, 12);
Transformation: Drehen (45 Grad);
Transform-Origin: Links;

Ausgang

Wir haben die einfachsten Methoden zum Zeichnen einer diagonalen Linie mit CSS erstellt.

Abschluss

Um die diagonale Linie zu zeichnen, die “verwandeln"Eigenschaft von CSS wird verwendet, was die Position der diagonalen Änderungen entsprechend dem angegebenen Wert des Grades ändert"45 Grad" oder "-45 Grad”. Mit dieser Weise können Sie die verschiedenen Winkel der Linie nach Ihrer Wahl einstellen. In diesem Artikel haben wir die Methode erläutert, um eine diagonale Linie mithilfe der Transformationseigenschaft mit Hilfe von Beispielen zu zeichnen.