„Sie müssen sich daran erinnert haben, dass wir, als wir in der Mittelschule waren. Wir haben fast jede Art von Form erzeugt und zeichnen in Zeichnen von Büchern, ich.e., Kreis, Rechteck, Quadrat, Dreieck, Polygon und vieles mehr. Eine dieser Formen ist "Polygon". Ein Polygon soll eine Form mit vielen Seiten haben. Innerhalb von HTML können wir auch eine Polygonform von Bildern oder Behältern erstellen oder einfach eine vektorbasierte Polygonerstellung ausprobieren. In diesem Tutorial werden wir einige Beispiele verbrauchen, um Polygone all dieser Typen zu erstellen.”

Beispiel 01

Schauen wir uns unser erstes HTML -Beispiel an, um ein Polygon auf der HTML -Webseite zu erstellen. Dafür müssen wir ein Standard -HTML generieren “.HTML ”-Dokument im Visual Studio -Code. Wir haben das HTML -Beispiel mit dem Standard -HTML -Format von Tags gestartet, der zum Erstellen einer Seite verwendet wird.e., HTML, Kopf, Stil, Körper usw. Das Head -Element -Tag dieses Code enthält ein einfaches "Titel" -Tag, das einen Titel für diese Seite enthält. Das Head -Tag enthält auch Styling für diese Webseite, aber wir werden seine Erklärung für eine Weile überspringen. Innerhalb des Körpers dieses HTML -Code haben wir ein Überschriften -Tag für die Standardgröße 1 -Überschrift von HTML verwendet, i.e., H1.

Mit einem "Div" -Tag wird verwendet, um einen Container auf der HTML -Webseite zu erstellen. Dieser Container würde ein Bild mit dem Tag "IMG" enthalten, gefolgt vom Attribut "SRC", um den Pfad eines Bildes mit dem Attribut "Alt" an "Bitcoin" zu anhängen. Nach diesem Container würde unsere HTML -Seite einen langen Textabsatz über die Verwendung des

Tag für HTML -Absätze. Unser HTML -Seiten -Skripten wurde hier abgeschlossen. Also schließen wir das Körpermarke als .

Jetzt werden wir uns das Style -Tag ansehen, um dem „DIV“ -Container unseres HTML -Skripts ein gewisses Design zu verleihen, um eine Polygonform zu erstellen. Erstens haben wir die Float -Eigenschaft von CSS verwendet, um den Behälter auf der linken Seite der HTML -Seite zusammen mit einer Breite von 250px und einer Höhe von 160px zu ziehen. Wir haben die Form der Außenseite eines Behälters auf das Polygon gesetzt.

Danach wurde das Bild auch in die Polygonform konvertiert, indem sie die Standardeigenschaft der Webkit-Clip-Path-Eigenschaft verwendet. Diese Eigenschaft verwendet die Funktion polygon (), um ein Polygon mit den gleichen prozentualen Werten zu erstellen, die wir für den Container verwendet haben. Die Stil- und Kopf -Tags wurden abgeschlossen und wir werden diesen Code ausführen.

Nachdem wir diesen HTML-Code im Chrome- oder Internet Explorer-Browser ausgeführt haben. Die Standardpolygonform wurde dem Behälter gegeben, und das Bild wurde zu diesem Behälter hinzugefügt, indem sie in eine Polygonform konvertiert wird. Gleichzeitig wurde der Textabsatz mit der relativen Position des Polygonbehälters auf unserem Bildschirm angezeigt.

Beispiel 02

Im ersten Beispiel ging es um die Verwendung einer einfachen Polygonfunktion mit der Clip-Path-Eigenschaft, um das Bild zu klammern und es in eine Polygonform umzuwandeln. In diesem Beispiel werden wir mit Hilfe der einfachen Polygoneigenschaft oder des Tags ein Polygon mit mindestens 4 Kanten erstellen. Also haben wir das Beispiel mit der HTML -Kennung begonnen, die vom Head -Tag verfolgt wurde. Dieses Head -Tag verwendet das Titel -Tag, um unserer HTML -Seite einen Titel zu geben. Wir haben kein Style -Tag verwendet, da wir das Inline -Styling in diesem Beispielcode durchführen werden. Also wurde der „Körper“ dieser HTML -Seite mit dem "Körper" -Tag begonnen, ich.e., . Es folgt dem Überschriften -Tag

für diese Seite.

Danach haben wir das SVG -Standard -Tag verwendet, um Standardvektorgrafiken zur Erstellung einer Polygonform zu verwenden. Die Höhe und die Breite wurden für den Bereich „SVG“ auf der HTML -Seite auf 400px eingestellt. Wir haben das Etikett mit den Versatz „Punkten“ begonnen, die für die Erstellung eines Polygons verwendet werden sollen. Diese Punkte würden Ihnen den X- und Y -Wert für die spezifische Kante mitteilen. Sie können so zahlreiche Kanten wie möglich verwenden. Wir haben nur 5 gemäß der Gesamtzahl der Kommas verwendet. Das Inline -Styling wurde mit dem Schlüsselwort „Stil“ verwendet, und wir haben die Eigenschaft „Füllung“ verwendet, um das Polygon mit einer hellgrünen Farbe zu füllen, die aus dem RGB -Standard -Farbschema ausgewählt wurde. Dabei wurde die Schlaganfalleigenschaft verwendet, um einen Grenzüberblick für das Polygon einer lila Farbe zu erstellen, und die Schlaganfall-Eigenschaft hat die Dicke des Polygonrandes auf 7PX gesetzt. Der „SVG“ und der Körper dieser Seite wurden abgeschlossen, und wir können diesen Code jetzt im Visual Studio -Code ausführen.

Die Ausgabe für den HTML -Code von Polygon hat eine einfache Überschrift mit einem Polygon von 4 Seiten angezeigt. Obwohl es 5 Seiten hat, ist der 5. aufgrund der Verwendung eines kleinen Wertes für eine Seite versteckt. Sie können sehen, dass die Polygonform mit einer hellgrünen Farbe und einem lila Rand gefüllt wurde.

Beispiel 03

Schauen wir uns ein anderes Beispiel an, um auf unserer HTML -Seite eine Polygonform zu erstellen. Dafür werden wir in unserem HTML -Code ein ähnliches SVG -Tag konsumieren. Ab der Visual Studio -Codedatei haben wir also ein HTML -Tag hinzugefügt, gefolgt vom Standard -Tag. Dieses Mal verwenden wir nicht das Kopf-, Titel- oder Stil -Tag.

Innerhalb des Körpers dieses Code haben wir das Tag gestartet und die Breite und Höhe für den SVG -Bereich auf der HTML -Seite angegeben. Danach verwendeten wir das Polygon -Tag, um ein neues Polygon zu erstellen, und fügten seine Punkte und Stil hinzu. Wir haben insgesamt 5 Kanten oder Punkte für dieses Polygon mit den verschiedenen x- und y-Achse-Werten hinzugefügt. Diese Kanten werden an den festgelegten Positionen gemäß der HTML -Seite platziert. Das Polygon wird mit lila Farbe gefüllt, und sein Hintergrund wird von purpurroten Farbe sein. Dabei wurde die Eigenschaft der Schlaganfallbreite auf 5 festgelegt, und die Füllregel wurde auf ungerade festgelegt. Dies bedeutet, dass die Farbe nur dort dort gefüllt wird, wo sich die Kanten eines Polygon kreuzen.

Nachdem wir diesen HTML-Code im Chrome-Browser ausgeführt haben, haben wir die Ausgabe des DISGUED-RELOW, ich.e., Stern Polygon auf dem Webseitenbildschirm. Dieser Stern Polygon bekam 5 Kanten mit einem purpurroten Rand und gefüllten Zapfen. Sie können sehen, dass der innere Bereich eines Sterns nicht gefüllt geblieben ist. Das liegt daran.

Abschluss

Innerhalb des ersten Absatzes haben wir die Verwendung und Entwicklung von Formen in unserem Leben zusammen mit ihrer Verwendung in HTML -Skripten besprochen. Darüber hinaus haben wir drei sehr unterschiedliche Beispiele für HTML -Skripting ausgearbeitet, um verschiedene Arten von Polygonen zu erstellen, ich.e., Jeder enthält eine andere Anzahl von Seiten und Kanten. Hierzu haben wir versucht, die Polygonfunktion, das Polygon-Tag und das SVG-Tag zu verwenden, um vektorbasierte Formen, Clip-Pfad-Eigenschaften, Polygonpunkte und Schlaganfalleigenschaften zu erstellen.