Som vi vet gir HTML strukturen til websider, og CSS kan brukes til å bruke stiler. CSS har også forskjellige stylingegenskaper som brukes til å tegne forskjellige former, for eksempel firkanter, sirkler, rektangler, ovaler, linjer og mer. Mer spesifikt er en linje et av designens mest allsidige og ofte brukte elementer som kan legges til horisontalt og vertikalt.

Denne artikkelen vil lære prosedyren å tegne horisontale og vertikale linjer ved hjelp av CSS. La oss komme i gang!

Hvordan tegne en linje med CSS?

For å tegne horisontale og vertikale linjer ved hjelp av CSS, kan forskjellige egenskaper brukes, for eksempel:

• “grense-venstre”
• “Grense-høyre”
• “grensen”
• “Border-Bottom”

La oss gå videre for å forstå arbeidet med de ovennevnte egenskapene en etter en!

Html
For å tegne linjer, for det første, vil vi spesifisere “”Element inne i kroppen på HTML -filen vår:

Nå, for å style en div, bruk de passende egenskapene. I vårt tilfelle vil vi tildele "bakgrunnsfarge”Eiendomsverdi som“#e4a2a4", og "grense”Eiendomsverdi som“2px solid #0fafc4”, Som indikerer henholdsvis bredde, type og farge, og"høyde”Eiendom er satt som“200px”.

CSS

div
bakgrunnsfarge: #e4a2a4;
Border: 2px Solid #0FAFC4;
Høyde: 200px;

Eksempel 1: Tegn horisontal linje med CSS
Vanligvis

---

elementet brukes til å tegne horisontale linjer i HTML. For å tegne en horisontal linje med CSS, kan du imidlertid legge til

element for overskriften og plasser deretter et navngitt “h_line”Inne i ovennevnte div av HTML-filen.

Html

Horisontal linje

Bruk nå CSS -egenskaper for å tegne en horisontal linje:

• Vi vil bruke “Border-Bottom”Eiendom, som er assosiert med en til tre verdier for linjebredde, linjetype og farge. Det eksemplet under levert setter sin verdi som "6px solid RGB (80,80,78)”.
• For å justere størrelsen på linjen, har vi satt "bredde”Eiendomsverdi som“300px”.
• “margin”Eiendomsverdien er satt som“bil”, Som representerer at margen er lik fra alle sider. “bunn topp”Eiendom kan også brukes til dette formålet.

CSS

.h_line
Border-Bottom: 6px Solid RGB (80, 80, 78);
Bredde: 300px;
Margin: Auto;

Lagre nå HTML -filen og åpne den i nettleseren din:

Som du kan se, har vi trukket en horisontal linje med hell med CSS -grenseeiendommen.

Eksempel 2: Tegn vertikal linje med CSS
For å tegne en vertikal linje, vil vi legge til

Merk for overskriften og plasser deretter en navngitt “V_line”Inne i ovennevnte div av HTML-filen.

Html

Vertikal linje

La oss gi "V_line”Div med noen CSS -egenskaper. For å tegne en vertikal linje, vil vi bruke:

• “grense-venstre”Eiendom er tildelt med verdier”5px Solid RGB (2, 99, 135)”, Der den første verdien representerer linjebredden, representerer den andre verdien linjetypen, og den tredje verdien indikerer fargen.
• “Nede til høyreEiendom kan også brukes til samme formål.
• Deretter har vi definert "høyde”Av linjen ved å sette verdien som“100px”.
• Sett "margin" som "0 Auto”, Der 0 indikerer topp og bunn og auto representerer lik margin til venstre og høyre.
• For å vise bredden på linjen, har vi tildelt "bredde”Eiendomsverdi som“2px”.

CSS

.v_line
grense-venstre: 5px solid RGB (2, 99, 135);
Høyde: 100px;
Margin: 0 Auto;
Bredde: 2px;

Å bruke disse verdiene vil tegne en vertikal linje som denne:

Det er det! Vi har brukt forskjellige CSS -egenskaper for å tegne horisontale og vertikale linjer.

Konklusjon

Du kan bruke “grensen”Eller“Border-Bottom”Egenskaper for å tegne en horisontal linje og“grense-venstre”Eller“Grense-høyre”Egenskaper for å tegne en vertikal linje i CSS. Denne egenskapen har verdier en til tre, der den første verdien definerer bredden, den andre verdien definerer sin type, enten det er solid, stiplet, stiplet eller spor og den tredje verdien indikerer fargen på linjen. Denne guiden har forklart hvordan du tegner horisontale og vertikale linjer med CSS.