“Devi aver ricordato che quando eravamo alle scuole medie, facevamo sessioni di disegno per imparare il disegno. Abbiamo provato quasi ogni tipo di creazione di forma e disegno nei libri di disegno, io.e., cerchio, rettangolo, quadrato, triangolo, poligono e molti altri. Una di quelle forme è "Polygon". Si dice che un poligono sia una forma con molti lati. All'interno di HTML, possiamo anche creare una forma poligonale di immagini o contenitori o semplicemente provare una creazione di poligoni a base di vettori. In questo tutorial, consumeremo alcuni esempi per creare poligoni di tutti questi tipi."

Esempio 01

Diamo un'occhiata al nostro primo esempio HTML per creare un poligono sulla pagina web HTML. Per questo, dobbiamo generare un HTML standard ".Documento HTML "nel codice Visual Studio. Abbiamo iniziato l'esempio HTML con il formato HTML standard di tag utilizzati per creare una pagina, i.e., Html, testa, stile, corpo, ecc. Il tag dell'elemento head di questo codice contiene un semplice tag "titolo" contenente un titolo per questa pagina. Il tag principale contiene anche uno stile per questa pagina web, ma salteremo la sua spiegazione per un po '. All'interno del tag corporeo di questo codice HTML, abbiamo utilizzato un tag di intestazione per l'intestazione di dimensioni 1 standard di HTML, i.e., H1.

Un tag "Div" viene utilizzato per creare un contenitore nella pagina Web HTML. Questo contenitore conterrebbe un'immagine usando il tag "IMG" seguito dall'attributo "SRC" per collegare il percorso di un'immagine con l'attributo "alt" set su "bitcoin". Dopo questo contenitore, la nostra pagina HTML conterrebbe un lungo paragrafo di testo tramite l'uso del

Tag per i paragrafi HTML. Il nostro scripting di pagina HTML è stato completato qui. Quindi, stiamo chiudendo l'etichetta del corpo come .

Ora, daremo un'occhiata al tag di stile per aggiungere un po 'di stile al contenitore "Div" del nostro script HTML per creare una forma poligonale. In primo luogo, abbiamo usato la proprietà galleggiante di CSS per tirare il contenitore sul lato sinistro della pagina HTML insieme a una larghezza di 250px e altezza di 160px. Abbiamo fissato la forma dell'esterno di un contenitore sul poligono.

Successivamente, l'immagine è stata anche convertita in forma di poligono tramite l'uso della proprietà standard di clip-path. Questa proprietà utilizza la funzione poligono () per creare un poligono degli stessi valori percentuali che abbiamo usato per il contenitore. Lo stile e i tag di testa sono stati completati e eseguiremo questo codice.

Dopo aver eseguito questo codice HTML all'interno del browser di Chrome o Internet Explorer, abbiamo ottenuto l'output a mezzanola mostrata. La forma di poligono standard è stata somministrata al contenitore e l'immagine è stata aggiunta a questo contenitore convertendolo in una forma di poligono. Allo stesso tempo, il paragrafo di testo è stato visualizzato con la posizione relativa del contenitore poligono sul nostro schermo.

Esempio 02

Il primo esempio era tutto sull'uso di una semplice funzione poligono con la proprietà Clip-Path per tagliare l'immagine e convertirla in forma di poligono. All'interno di questo esempio, creeremo un poligono di almeno 4 bordi con l'aiuto di semplici proprietà o tag poligoni. Quindi, abbiamo iniziato l'esempio con l'identificatore HTML tracciato dal tag Head. Questo tag head utilizza il tag del titolo per dare un titolo alla nostra pagina HTML. Non abbiamo usato alcun tag di stile perché eseguiremo lo stile in linea in questo codice di esempio. Quindi, il "corpo" di questa pagina HTML è stato avviato con il tag "corpo", i.e., . Segue il tag di intestazione

per questa pagina.

Dopo questo, abbiamo utilizzato il tag standard "SVG" per utilizzare la grafica vettoriale standard per la creazione di una forma in poligono. L'altezza e la larghezza sono state impostate su 400px per l'area "SVG" sulla pagina HTML. Abbiamo iniziato il tag con i "punti" offset da utilizzare per la creazione di un poligono. Questi punti ti direbbero il valore xey per il bordo specifico. Puoi usare il più possibile numerosi bordi. Abbiamo usato solo 5 secondo il numero totale di virgole. Lo stile in linea è stato utilizzato con la parola chiave "stile" e abbiamo usato la proprietà "riempimento" per riempire il poligono con un po 'di colore verde chiaro selezionato dalla combinazione di colori standard RGB. Insieme a ciò, la proprietà della corsa è stata utilizzata per creare uno schema del bordo per il poligono di un po 'di colore viola e la proprietà della larghezza della corsa ha fissato lo spessore del bordo poligono a 7px. Gli "SVG" e il corpo di questa pagina sono stati completati e ora possiamo eseguire questo codice nel codice Visual Studio.

L'output per il codice HTML poligono ha visualizzato una semplice intestazione con un poligono di 4 lati. Sebbene abbia 5 lati, il 5 ° è nascosto a causa dell'uso di un piccolo valore per un lato. Puoi vedere che la forma del poligono è stata riempita con un colore verde chiaro e un bordo viola.

Esempio 03

Diamo un'occhiata a un altro esempio per creare una forma di poligono sulla nostra pagina HTML. Per questo, consumeremo un tag SVG simile nel nostro codice HTML. Quindi, a partire dal file del codice Visual Studio, abbiamo aggiunto un tag HTML seguito dal tag standard. Questa volta, non stiamo usando la testa, il titolo o il tag di stile perché possiamo eseguire tutta la decorazione vettoriale usando il semplice tag SVG all'interno del corpo di un codice HTML.

All'interno del tag del corpo di questo codice, abbiamo avviato il tag e specificato la larghezza e l'altezza per l'area SVG sulla pagina HTML. Successivamente, abbiamo usato il tag poligono per creare un nuovo poligono e abbiamo aggiunto i suoi punti e stile. Abbiamo aggiunto un totale di 5 bordi o punti per questo poligono con i diversi valori dell'asse Y. Questi bordi sono posizionati nelle posizioni impostate in base alla pagina HTML. Il poligono sarà riempito di colore viola e il suo sfondo sarà di colore rosa cremisi. Insieme a ciò, la proprietà della larghezza di ictus è stata fissata a 5 e la regola di riempimento è stata impostata su Odd. Ciò significa che dove i bordi di un poligono si intersecano, il colore sarebbe riempito solo lì.

Dopo aver eseguito questo codice HTML nel browser Chrome, abbiamo ottenuto l'output a mezzogiorno mostrato, i.e., Star Polygon, nella schermata della pagina web. Questa stella poligono ha ottenuto 5 bordi con un bordo cremisi, rosa e coni pieni. Puoi vedere che l'area interna di una stella è stata lasciata non riempita. È perché abbiamo usato la proprietà di riempimento set per pari.

Conclusione

Nel primo paragrafo, abbiamo discusso dell'uso e dell'evoluzione delle forme nella nostra vita insieme al loro uso negli script HTML. Insieme a questo, abbiamo elaborato tre esempi molto diversi di script HTML per creare diversi tipi di poligoni, i.e., ognuno contiene un numero diverso di lati e bordi. Per questo, abbiamo provato a utilizzare la funzione poligono, il tag poligono e il tag SVG per creare forme a base vettoriale, proprietà per il percorso di clip, punti poligonici e proprietà della corsa.