I CSS er linjer stort sett horisontale eller vertikale. Imidlertid kan du bruke CSS -egenskaper. I sammenheng med CSS er en diagonal linje bare en rotasjon av en horisontal linje i en vinkel på 45 grader eller -45 grader. Dette er mulig ved hjelp av CSS “forvandle”Eiendom.

Denne guiden vil vise hvordan du bruker CSS “forvandle”Eiendom for å tegne en diagonal linje.

Hvordan tegne diagonal i CSS?

For å tegne en diagonal i CSS, “forvandle”Eiendom brukes. Først vil vi diskutere “forvandle”Eiendom slik at du kan forstå det på en bedre måte.

Hva er egenskapen "Transform" i CSS?

I CSS, “forvandle”Eiendom brukes til 2D- og 3D -transformasjon av HTML -elementer. Ved hjelp av denne egenskapen kan et element roteres, flyttes, skjev og skaleres. Mer spesifikt kan du bruke transformasjonseiendommen til å tegne en diagonal linje ved hjelp av CSS.

Syntaks

Syntaks for transformasjonseiendom er:

Transform: Ingen | Transform-funksjoner

Beskrivelse av ovennevnte verdier er gitt nedenfor:

• ingen: Det brukes til å begrense transformasjonen av et element.
• Transformfunksjoner: Det brukes til å påkalle forskjellige funksjoner som roter, roter (), skala (), flytt () og skjevhet ().

La oss sjekke ut noen praktiske eksempler relatert til å tegne en diagonal linje på 45 og -45 grader.

Eksempel 1: Tegn en diagonal linje på 45 grader ved hjelp av CSS

Lag først en tom div i HTML -delen for å legge til en diagonal linje. I vårt tilfelle har vi lagt til en overskrift

og a .

Html

Diagonal linje

Gå nå til CSS -delen for å legge til en diagonal linje.

I CSS har vi brukt “div”For å få tilgang til den opprettede beholderen i HTML. Neste, bruk "Border-Bottom”Eiendom til det og setter grensenes verdier som“3px”,“fast”, Og“RGB (255, 0, 0)”, Henholdsvis. Bruk deretter “bredde”Eiendom i neste trinn og angi verdiene som“40%”. Tilordne dessuten verdien av transformasjonsegenskapen som "roter (45deg)”Og transformasjon-opprinnelsesegenskapen som“venstre”Å tegne den diagonale linjen fra venstre.

CSS

div
Border-Bottom: 3px Solid RGB (255, 0, 0);
Bredde: 45%;
Transform: roter (45deg);
Transform-origin: Venstre;

Merk: Her, "Transform-origin”Eiendom brukes til å sette diagonalens plassering langs x-aksen og y-aksen.

Som et resultat av ovennevnte kode, vil du se følgende utdata:

Eksempel 2: Tegn en diagonal linje på -45 grader ved hjelp av CSS

I dette eksemplet vil vi tegne en diagonal linje ved hjelp av en "-45deg”Vinkel. For dette formålet, flytt til CSS-delen, og endre verdien av transformasjonseiendommen og transformasjon-opprinnelsen.

Her vil vi sette verdien av transformasjonseiendommen som “-45deg”Og transform-origin som“Ikke sant”.

CSS

div
Border-Bottom: 3px Solid RGB (0, 47, 255);
Bredde: 45%;
Transform: roter (-45deg);
Transform-origin: Rett;

Lagre koden, gå til HTML -filen og utfør den for å se følgende utfall:

Det ovennevnte bildet indikerer at transformasjonsegenskapen blir implementert. Ønsker å tegne en linje inne i en boks? Sjekk ut neste eksempel!

Eksempel: Tegn en diagonal linje inne i boksen ved hjelp av CSS

For å tegne en diagonal inne i boksen, lag en boks og tegne deretter en diagonal inni den. For å gjøre det, vil vi legge til en overskrift og opprette et DIV -klassenavn "eske”Og lag deretter en annen div inne i klassenavnet”linje”.

Html

Diagonal linje

Gå nå til CSS for å tegne en diagonal inne i boksen, spesifiser bredde- og høydeegenskapsverdiene som "300px”. Etter det, legg til en kant rundt div ved hjelp av grenseegenskapen og setter verdiene som "5px”,“fast”, Og“RGB (202, 33, 75)”.

CSS

.eske
Bredde: 300px;
Høyde: 300px;
Grense: 5px Solid RGB (202, 33, 75);

Dette vil vise følgende utfall:

Deretter, flytt til den andre diven og påkaller “Calc ()”Funksjon for å beregne lengden på diagonalen i henhold til størrelsen på kvadratboksen. For dette, bruk formelen til diagonal inne i torget “side*√2”, Hvor verdien av √2 er“1.41”, Og siden av torget er“300px”.

Sett dessuten verdien av grensen-bottom-eiendommen som "3px”,“fast”, Og“RGB (1, 68, 12)”, Henholdsvis. Til slutt, tilordne verdien av transformasjonseiendommen som “roter (45deg)”Og transformasjon-opprinnelsesegenskapen som“venstre”For å tegne diagonalinjen.

CSS

.linje
Bredde: Calc (300px*1.41);
Border-Bottom: 3px Solid RGB (1, 68, 12);
Transform: roter (45deg);
Transform-origin: Venstre;

Produksjon

Vi har samlet de enkleste metodene for å tegne en diagonal linje ved hjelp av CSS.

Konklusjon

For å tegne den diagonale linjen, “forvandle”Eiendom til CSS brukes, som endrer plasseringen av de diagonale endringene i henhold til den gitte verdien av graden,“45deg”Eller“-45deg”. Ved å bruke dette kan du angi de forskjellige vinklene på linjen i henhold til ditt valg. I denne artikkelen har vi forklart metoden for å tegne en diagonal linje ved hjelp av transformasjonsegenskapen ved hjelp av eksempler.