“Du må ha husket at når vi gikk på ungdomsskolen, pleide vi å ta tegningsøkter for å lære å tegne. Vi har prøvd nesten alle typer formskaping og tegning av tegningsbøker, jeg.e., sirkel, rektangel, firkant, trekant, polygon og mange flere. En av disse formene er “Polygon”. En polygon sies å være en form med mange sider. Innen HTML kan vi også lage en polygonform av bilder eller containere eller bare prøve en vektorbasert polygonoppretting. I denne opplæringen vil vi konsumere noen eksempler for å lage polygoner av alle disse typene.”

Eksempel 01

La oss se på vårt første HTML -eksempel for å lage en polygon på HTML -websiden. For dette må vi generere en standard HTML “.HTML ”-dokument i Visual Studio Code. Vi har startet HTML -eksemplet med standard HTML -format for tagger som brukes til å lage en side, i.e., Html, hode, stil, kropp osv. Head Element -taggen til denne koden inneholder en enkel "tittel" -merke som inneholder en tittel for denne siden. Hodemerket inneholder også styling for denne nettsiden, men vi hopper over forklaringen på en stund. Innenfor kroppskoden til denne HTML -koden har vi brukt en overskriftstag for standardstørrelse 1 -overskriften til HTML, I.e., H1.

En "div" -kode brukes til å lage en beholder i HTML -websiden. Denne beholderen vil inneholde et bilde ved å bruke "IMG" -koden etterfulgt av "SRC" -attributtet for å knytte banen til et bilde med attributtet "Alt" satt til "Bitcoin". Etter denne beholderen vil vår HTML -side inneholde et langt avsnitt med tekst via bruk av

Tag for HTML -avsnitt. HTML -sideskripingen vår er fullført her. Så vi lukker kroppskoden som .

Nå skal vi se på stilkoden for å legge til litt styling til "Div" -beholderen i HTML -skriptet vårt for å lage en polygonform. For det første har vi brukt float -egenskapen til CSS for å trekke beholderen til venstre på HTML -siden sammen med en bredde på 250px og høyde på 160px. Vi har satt formen på utsiden av en beholder til polygonen.

Etter det har bildet også blitt konvertert til polygonformen via bruk av standard Webkit Clip-Path-eiendom. Denne egenskapen bruker polygon () -funksjonen for å lage en polygon med de samme prosentvise verdiene som vi har brukt til beholderen. Stil- og hodemerkene er fullført, og vi kommer til å utføre denne koden.

Etter å ha kjørt denne HTML-koden i Chrome- eller Internet Explorer-nettleseren, har vi fått den viste belowutgangen. Standard polygonform er gitt til beholderen, og bildet er lagt til denne beholderen ved å konvertere den til en polygonform. Samtidig har tekstparagrafen blitt vist med den relative posisjonen til polygonbeholderen på skjermen vår.

Eksempel 02

Det første eksemplet handlet om bruk av en enkel polygonfunksjon med egenskapen til utklipp for å klippe bildet og konvertere det til en polygonform. Innenfor dette eksemplet vil vi lage en polygon på minst 4 kanter ved hjelp av enkel polygonegenskap eller tag. Så vi har startet eksemplet med HTML -identifikatoren sporet av Head -taggen. Denne hodemerket bruker tittelkoden for å gi en tittel til HTML -siden vår. Vi har ikke brukt noen stilkode fordi vi skal utføre inline styling i denne eksemplet koden. Så "kroppen" på denne HTML -siden er startet med "kropp" -merket, i.e., . Det følger overskriftskoden

for denne siden.

Etter dette har vi brukt "SVG" -standardmerket for å benytte oss av standard vektorgrafikk for å lage en polygonform. Høyden og bredden er satt til 400px for "SVG" -området på HTML -siden. Vi har startet taggen med forskyvningen "poeng" som skal brukes til å opprette en polygon. Disse punktene vil fortelle deg x og y -verdien for den spesifikke kanten. Du kan bruke så mange kanter som mulig. Vi har bare brukt 5 i henhold til det totale antallet komma. Inline -stylingen har blitt brukt med nøkkelordet "Style", og vi har brukt eiendommen "Fill" for å fylle polygonen med litt lysegrønn farge valgt fra RGB -standardfargeskjemaet. Sammen med det har hjerneslagegenskapen blitt brukt til å lage en grenseoversikt for polygon med en vis. "SVG" og kroppen på denne siden er fullført, og vi kan utføre denne koden i Visual Studio -koden nå.

Utgangen for polygon HTML -koden har vist en enkel overskrift med en polygon på 4 sider. Selv om den har 5 sider, er den femte skjult på grunn av bruk av en liten verdi for den ene siden. Du kan se at polygonformen har blitt fylt med en lys grønn farge og en lilla kant.

Eksempel 03

La oss se på et annet eksempel for å lage en polygonform på HTML -siden vår. For dette vil vi konsumere en lignende SVG -kode i HTML -koden vår. Så fra den visuelle studiokodefilen har vi lagt til en HTML -tag etterfulgt av standardkoden. Denne gangen bruker vi ikke hodet, tittelen eller stilen fordi vi kan utføre all vektordekorasjonen ved å bruke den enkle SVG -taggen i kroppen til en HTML -kode.

Innenfor kroppskoden til denne koden har vi startet taggen og spesifisert bredden og høyden for SVG -området på HTML -siden. Etter det brukte vi polygon -taggen for å lage en ny polygon og la til poeng og stil. Vi har lagt til totalt 5 kanter eller punkter for denne polygonen med de forskjellige X- og Y-aksens verdier. Disse kantene er plassert i de faste stillingene i henhold til HTML -siden. Polygonen vil være fylt med lilla farge, og bakgrunnen vil være av crimson rosa farge. Sammen med det er eiendommen. Dette betyr at hvor kantene på en polygon krysser hverandre, vil fargen bare bli fylt der.

Etter å ha kjørt denne HTML-koden i Chrome-nettleseren, har vi fått den vist-below-utgangen, i.e., Star Polygon, på nettsiden. Denne stjernen Polygon fikk 5 kanter med en rød, rosa kant og fylte kjegler. Du kan se at det indre området til en stjerne har blitt forlatt ufylt. Det er fordi vi har brukt fyllstyreegenskapen som er satt til jevn-odde.

Konklusjon

I løpet av første ledd har vi diskutert bruken og utviklingen av former i livet vårt sammen med deres bruk i HTML -skripting. Sammen med det har vi utdypet tre veldig forskjellige eksempler på HTML -skripting for å lage forskjellige typer polygoner, i.e., Hver inneholder et annet antall sider og kanter. For dette prøvde vi å bruke polygonfunksjonen, polygon-taggen og SVG-taggen for å lage vektorbaserte former, klippveiegenskaper, polygonpunkter og slagegenskaper.