Esagono CSS
Un esagono è una forma matematica e geometrica chiamata poligono con 6 bordi. Per progettare un esagono, useremo HTML e CSS."
CSS
CSS è principalmente di tre tipi. Ogni tipo dipende dalla posizione della sua dichiarazione. Uno è in linea, che è scritto all'interno dei tag HTML. Il secondo è interno, scritto nella parte principale dei tag HTML. Mentre il terzo è CSS esterno, che viene dichiarato al di fuori del codice HTML e il file HTML in un altro file con l'estensione CSS. Andremo con il CSS interno nella progettazione dell'esagono. I tag di apertura e chiusura per il CSS interno sono:
Utensili
Gli strumenti di base utilizzati per creare una semplice pagina web statica sono un editor di testo e qualsiasi browser. È possibile utilizzare qualsiasi editor di testo, ma in questo articolo stiamo utilizzando un semplice editor di testo predefinito di Windows e Chrome come browser. Scriviamo il codice o i tag HTML nell'editor ed eseguiamo quel file sul browser.
Prerequisito
Non ci sono alcuni prerequisiti riguardo a qualsiasi strumento o software. Ma l'utente deve avere un po 'di know-how di tag HTML, poiché le basi sono necessarie per costruire un esagono e progettarlo. I tag HTML contengono due parti principali, la testa e il corpo.
Mentre alcuni altri tag saranno spiegati con codice al momento dell'implementazione.
Implementazione dell'esagono
Per l'implementazione, aprire il blocco note e avviare il codice HTML. All'interno della porzione di testa, abbiamo usato il nome del titolo come esagono; Questo apparirà nella scheda. Dirigersi verso CSS interno. All'interno del tag di stile, abbiamo creato una spiegazione della classe esagonale.
In CSS, principalmente nello stile interno ed esterno, per rendere il codice breve e facilmente comprensibile, utilizziamo ID e classi. Qui sorge la domanda su come funzionano queste classi e ID. Tutte le caratteristiche e gli effetti che vogliamo applicare a qualsiasi oggetto che stiamo creando sono menzionati all'interno della classe o del corpo dell'ID. A questi ID e classi è accessibile utilizzando i loro nomi all'interno dei tag in cui vogliamo applicare qualsiasi effetto. Quindi qui, abbiamo creato un ID esagonale all'interno del tag di stile. Questo ID verrà applicato al momento della creazione dell'esagono. All'interno del corpo esagonale, abbiamo dichiarato un luogo per disegnare la forma; Per questo, abbiamo usato due funzionalità, una è la parte superiore e l'altra è la sinistra. La "parte superiore" decide la distanza dall'alto alla forma. E la sinistra decide la distanza dal bordo sinistro alla forma. Può essere scritto in percentuale o in qualsiasi altra unità.
Top: 20;
A sinistra: 10%;
Il bordo marginale è impostato come auto. In questo modo, la posizione della forma è tutta impostata. Ora applicheremo un colore alla forma. Questo è dato per essere il colore di sfondo. Abbiamo scelto il magenta.
Background-color: Magenta;
L'esagono poligono è formato da angoli o punti curvi. Per rendere curvi i punti, aggiungeremo una caratteristica del raggio del bordo per renderlo agevolmente curvo invece di avere bordi ruvidi.
Raggio di confine: 10px;
Qui il valore è scritto nell'unità pixel. Ora decideremo di dare forma, altezza e larghezza. Queste due caratteristiche sono il blocco degli elementi per la creazione e lo styling di una forma. Si consiglia sempre di forma o testo per essere scritta o disegnata all'interno di una casella specificata. Questa scatola aiuta a trattare l'oggetto molto facilmente. Quindi abbiamo dichiarato una scatola di confine qui.
CSS | Pseudo Elements/Class Proprietà
Questa proprietà viene utilizzata per ruotare le linee di forma a 60 gradi, creando un esagono perfetto. Uno pseudo-elemento CSS è un tipo di stile che viene utilizzato per modellare una parte particolare dell'elemento. Ad esempio, stabilisce la prima linea della forma. Tutti questi contenuti vengono applicati prima e dopo il contenuto della forma. Possiamo applicare qualsiasi funzionalità in questo modo.
Il contenuto e il bordo sono alcune caratteristiche integrate della proprietà pseudo. Tutte le altre caratteristiche di altezza, larghezza e colore sono le stesse che abbiamo descritto nella semplice descrizione dell'ID dell'esagono.
Ora tutte le funzionalità di cui sopra sono dichiarate come due parti da applicare per formare un esagono.
.esagono: prima di
Trasformazione: ruotare (60 gradi);
Una caratteristica simile è per la parte rimanente dell'esagono; Tutte le forme vengono create utilizzando un angolo specificato per il poligono 60 gradi sono formati tra ogni due linee alternative.
Lo stile e le etichette della testa sono ora chiuse. Assicurati che tutti i tag aperti debbano essere chiusi per farli applicare nel codice; Altrimenti, alcuni effetti potrebbero essere persi. Ora che porta verso la parte del corpo.
Qui abbiamo usato una semplice intestazione di testo per scrivere una riga. Questo stile è un esempio di stile in linea.
< body style = "text-align : left"<
Abbiamo dato un allineamento al testo da visualizzare sul lato sinistro della pagina web e dato il colore del carattere come nero.
Dopo il testo, dichiareremo il codice per la forma dell'esagono. Div è un contenitore come un tavolo in HTML. Che viene utilizzato per contenere oggetti in una posizione dritta. All'interno del corpo Div, la classe CSS e il nome ID sono dichiarati per applicare tutte le caratteristiche sul contenitore div della forma. Chiudi tutti i tag aperti, io.e., Div, corpo e html.
Salviamo il file del blocco note con il ".Estensione HTML "per creare una pagina web. Questo file viene salvato come "esempio.html."Quindi, utilizzando questa estensione, l'icona del file verrà impostata come icona del browser predefinito.
Quando eseguiamo il file nel browser, visualizzerà una pagina Web con un'intestazione e una forma esagonale sul lato sinistro della pagina.
Conclusione
Un diagramma esagonale è formato usando HTML incorporato con un foglio di stile a cascata con esso. All'inizio, parliamo delle basi di HTML. E i tipi di CSS sono anche spiegati per eliminare qualsiasi tipo di ambiguità sui tipi CSS. Sono menzionati due strumenti di base che sono essenziali per la creazione e l'esecuzione dei tag HTML e CSS. L'esempio di Hexagon è implementato e spiegato riga per riga con il codice e il suo utilizzo. Un modo unico di creare una forma è spiegato attraverso la proprietà pseudo-elementi CSS. Alla fine, abbiamo mostrato la pagina web statica formata a seguito del codice definito.