CSS Hexagon
En sekskant er en matematisk, geometrisk form kalt en polygon som har 6 kanter. For å designe en sekskant, vil vi bruke HTML og CSS.”
CSS
CSS er hovedsakelig av tre typer. Hver type avhenger av plasseringen av erklæringen. Den ene er inline, som er skrevet inne i HTML -taggene. Den andre er intern, skrevet i hodedelen av HTML -tagger. Mens den tredje er ekstern CSS, som er erklært utenfor HTML -koden og HTML -filen i en annen fil med CSS -utvidelsen. Vi vil gå med den interne CSS i å designe sekskant. Åpnings- og lukkende tagger for de interne CSS er:
Verktøy
De grunnleggende verktøyene som brukes til å lage en enkel statisk webside er en tekstredigerer og enhver nettleser. Du kan bruke hvilken som helst tekstredigerer, men i denne artikkelen bruker vi en enkel Windows standard tekstredigerer og Chrome som nettleser. Vi skriver HTML -koden eller taggene i redaktøren og utfører den filen i nettleseren.
Forutsetning
Det er ikke noen forutsetninger om noe verktøy eller programvare. Men brukeren må ha en viss kunnskap om HTML-tagger, ettersom det grunnleggende kreves for å bygge en sekskant og designe den. HTML -tagger inneholder to hoveddeler, hode og kropp.
Mens noen andre tagger vil bli forklart med kode på implementeringstidspunktet.
Implementering av sekskant
For implementeringen, åpne notisblokken og start HTML -koden. Inne i hodedelen har vi brukt tittelnavnet som en sekskant; Dette vises i fanen. På vei mot intern CSS. Inne i stilmerket har vi laget en forklaring av sekskantklassen.
I CSS, hovedsakelig i intern og ekstern styling, for å gjøre koden kort og lett forståelig, bruker vi ID -er og klasser. Her oppstår spørsmålet om hvordan disse klassene og ID -en fungerer. Alle funksjonene og effektene som vi ønsker å bruke på ethvert objekt vi oppretter, er nevnt i klassen eller IDs kropp. Disse ID -ene og klassene får tilgang til ved å bruke navnene sine i taggene der vi ønsker å bruke noen effekt. Så her har vi opprettet en sekskantet ID inne i stilkoden. Denne IDen vil bli brukt på tidspunktet for å opprette sekskanten. Inne i sekskantlegemet har vi erklært et sted for å trekke formen; For dette har vi brukt to funksjoner, den ene er toppen, og den andre er venstre. "Toppen" bestemmer avstanden fra toppen til formen. Og venstre bestemmer avstanden fra venstre kant til formen. Det kan skrives i prosent eller annen enhet.
Topp: 20;
Venstre: 10%;
Marginal grensen er satt som auto. På denne måten er plasseringen av formen helt satt. Nå vil vi bruke en farge på formen. Dette er gitt for å være bakgrunnsfargen. Vi har valgt magentaen.
Bakgrunnsfarge: Magenta;
Polygon -sekskanten dannes ved å ha hjørner eller buede punkter. For å gjøre punktene buede, vil vi legge til et trekk ved grensradius for å gjøre det glatt buet i stedet for å ha grove kanter.
Border-Radius: 10px;
Her er verdien skrevet i Pixels -enheten. Nå bestemmer vi oss for å gi form, høyde og bredde. Disse to funksjonene er byggesteinen for å skape og style en form. Enhver form eller en hvilken som helst tekst anbefales alltid å bli skrevet eller tegnet i en spesifisert boks. Denne boksen hjelper til med å håndtere objektet veldig enkelt. Så vi har erklært en grenseboks her.
CSS | Pseudo -elementer/klasseeiendommer
Denne egenskapen brukes til å rotere formlinjene i 60 grader, og gjør en perfekt sekskant. En CSS-pseudo-element er en type styling som brukes til å style en bestemt del av elementet. For eksempel stiler det den første linjen i formen. Alt dette innholdet blir brukt før og etter innholdet i formen. Vi kan bruke hvilken som helst funksjon på denne måten.
Innholdet og grensen er noen innebygde funksjoner i Pseudo-eiendommen. Alle andre funksjoner med høyde, bredde og farge er de samme som vi har beskrevet i den enkle ID -beskrivelsen av sekskanten.
Nå er alle ovennevnte funksjoner erklært som to porsjoner som skal brukes for å danne en sekskant.
.sekskant: før
Transform: roter (60deg);
En lignende funksjon er for den gjenværende delen av sekskanten; Alle formene opprettes ved å bruke en spesifisert vinkel for polygon 60 grader dannes mellom hver annen alternative linjer.
Stilen og hodemerkene er lukket nå. Forsikre deg om at alle taggene du åpnet, må være stengt for å gjøre dem brukt i koden; Ellers kan noen effekter gå tapt. Leder nå mot kroppsdelen.
Her har vi brukt en enkel tekst overskrift for å skrive en linje. Denne stilen er et eksempel på inline styling.
< body style = "text-align : left"<
Vi har gitt en justering av teksten som skal vises på venstre side av websiden og gitt skriftfargen som svart.
Etter teksten vil vi erklære koden for sekskantformen. Div er en beholder som et bord i HTML. Som brukes til å inneholde objekter i en rett posisjon. Inne. Lukk alle de åpne taggene, jeg.e., Div, kropp og html.
Vi lagrer filen til notisblokken med ".HTML ”utvidelse for å opprette en webside. Denne filen lagres som “prøve.html.”Så ved å bruke denne utvidelsen, blir ikonet for filen satt som ikonet for standard nettleseren.
Når vi kjører filen i nettleseren, vil den vise en webside som har en overskrift og en sekskantform på venstre side av siden.
Konklusjon
Et sekskantdiagram dannes ved å bruke HTML innebygd med Cascading Style Sheet med det. I starten snakker vi om det grunnleggende om HTML. Og typene CSS blir også forklart for å eliminere noen form for tvetydighet angående CSS -typer. To grunnleggende verktøy er nevnt som er essensielle for oppretting og utførelse av HTML- og CSS -koder. Hexagon-eksemplet implementeres og forklarte linje-for-linje med koden og bruken. En unik måte å skape en form forklares gjennom CSS Pseudo-element-egenskapen. Til slutt har vi vist den statiske websiden som er dannet som et resultat av den definerte koden.