So erstellen Sie ein Parallelogramm in Javascript

JavaScript ist eine sehr leistungsfähige Programmiersprache, die eine Vielzahl von Operationen implementieren kann. Unter diesen ist die Erstellung von Parallelogrammen eine relativ häufige Anforderung, da Parallelogramme einzigartige visuelle Effekte erzielen und Webseiten mit schönen Dekorationen versehen können. In diesem Artikel wird erläutert, wie Sie mit JavaScript Parallelogramme erstellen.

Voraussetzung für die Herstellung eines Parallelogramms ist ein Rechteck. Wir können mit HTML und CSS ein Rechteck wie folgt erstellen:

<div id="rectangle"></div>

#rectangle {
    width: 200px;
    height: 100px;
    background-color: #ccc;
}

Dadurch entsteht ein Rechteck mit einer Breite von 200 Pixeln, einer Höhe von 100 Pixeln und einer Hintergrundfarbe von Grau.

Jetzt müssen wir dieses Rechteck in ein Parallelogramm umwandeln. Es gibt viele Möglichkeiten, dieses Ziel zu erreichen. Zwei der gängigsten Methoden werden im Folgenden vorgestellt.

1. Verwenden Sie das Transformationsattribut

Das Transformationsattribut kann Operationen wie Drehung, Skalierung und Verschiebung von Elementen implementieren. Wir können transform: skewX(deg); verwenden, um das Rechteck nach rechts zu neigen, wobei deg den Neigungswinkel darstellt. Um ein Rechteck in ein Parallelogramm umzuwandeln, müssen Sie die gegenüberliegenden Seiten im gleichen Winkel nach oben oder unten neigen, wie unten gezeigt:

#rectangle {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    transform: skewX(30deg);
}

Dadurch wird das Rechteck in ein nach rechts oben geneigtes Parallelogramm umgewandelt. Wenn Sie ein nach unten geneigtes Parallelogramm wünschen, können Sie deg in einen negativen Wert ändern. Es ist zu beachten, dass die Änderung der Breite des Rechtecks ​​zu Layoutproblemen führen kann.

2. Verwenden Sie das CSS-Attribut „Clip-Pfad“

Das Attribut „Clip-Pfad“ kann den Beschneidungsbereich des Elements steuern und das Ausschneiden bewirken die Elementform. Wir können clip-path:polygon(x1 y1, x2 y2, x3 y3, x4 y4); verwenden, um das Rechteck in ein Parallelogramm umzuwandeln. Unter diesen repräsentieren x1 y1, x2 y2, x3 y3, x4 y4 die vier Scheitelpunktkoordinaten des Parallelogramms. Die Berechnungsmethode für bestimmte Koordinatenwerte kann selbst gesucht werden.

#rectangle {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    clip-path: polygon(0 0, 200px 30px, 200px 100px, 0 70px);
}

Dadurch wird das Rechteck in ein Parallelogramm mit einer Neigung oben rechts. Bitte beachten Sie, dass es bei einigen Browsern zu Kompatibilitätsproblemen kommen kann, da das Clip-Pfad-Attribut nicht von allen Browsern unterstützt wird.

Zusammenfassung

Es ist nicht sehr schwierig, mit JavaScript ein Parallelogramm zu erstellen. Wir können das CSS-Transformationsattribut oder das Clip-Path-Attribut verwenden, um entsprechend unseren Anforderungen auszuwählen. Natürlich haben verschiedene Methoden ihre eigenen Vor- und Nachteile, und Sie müssen entsprechend der tatsächlichen Situation auswählen. Ich hoffe, dass dieser Artikel für alle hilfreich sein kann. Vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Parallelogramm in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!