Hvordan tegne et rektangel i HTML eller CSS

Et rektangel kan opprettes ved å bruke HTML samt en kombinasjon av HTML og CSS. Mens du bruker CSS -egenskapene for å tegne et rektangel, er det ganske enkelt påkrevd å legge til den aktuelle velgeren til HTML -elementet og bruke noen stylingegenskaper i CSS -stilelementet. Men hvis utvikleren ønsker å tegne et rektangel uten å legge til et eget CSS -stilelement, kan inline -stylingen brukes inne i HTML -åpningskodene.

Denne artikkelen vil forklare hvordan du tegner et rektangel gjennom følgende metoder:

• Metode 1: Tegning av et rektangel ved hjelp av CSS
• Metode 2: Tegning av et rektangel ved hjelp av HTML

Metode 1: Tegning av et rektangel ved hjelp av CSS

For å tegne et rektangel ved hjelp av CSS -stilelementet, må et enkelt HTML -element legges til ved å tilordne det en klasse eller en ID. Deretter kan egenskapene deretter brukes på elementet gjennom ID- eller klassevalgene. Det former elementet i form av et rektangel.

Eksempel
La oss forstå konseptet ovenfor ved hjelp av et eksempel:

I ovennevnte HTML -setning, en “”Containerelement er lagt til med en klasse erklært som“rektangel”.

Etter å ha opprettet en “”Element, CSS -egenskapene kan brukes på det for å representere DIV -beholderen som et rektangel i utgangsgrensesnittet:

.rektangel

Bredde: 300px;
Høyde: 150px;
Bakgrunn: rosa;
Margin-venstre: 25%;

I ovennevnte kodebit:

• Klasselytteren “.rektangel”Er blitt lagt til for å referere til det respektive div containerelementet.
• Inne i klasselytteren, "bredde”Eiendom er lagt til og definert som“300px”. Dette vil sette rektangelbredden til 300 piksler.
• Tilsvarende "høyde”Eiendom setter høyden på rektangelet til“150px”.
• “bakgrunn”Eiendom er blitt definert som“rosa”. Dette vil fargelegge rektangelet rosa.
• “margin-venstre”Eiendom er nettopp lagt til for å flytte rektangelet litt til høyre for en bedre visuell representasjon av rektangelet.

Dette vil lage et rektangel på websiden:

Metode 2: Tegning av et rektangel ved hjelp av HTML

En annen tilnærming er å legge til alle egenskapene som kreves for å tegne et rektangel i HTML -åpningskodene.

Eksempel
La oss forstå dette med et enkelt eksempel ved å legge til HTML “” -koden inne i “” -merket (begge inne i hoveddiv -taggen):

I ovennevnte kodebit:

• En "”Containerelement er lagt til for å lage en div med ID”Rekt”.
• Inne i åpningsdivaggen, Inline CSS “margin”Eiendom definerer den vertikale plasseringsposisjonen til rektangelet eller DIV som“100px”Og den horisontale plasseringsposisjonen som“150px”.
• Inne i "”Element, det er“”(Skalerbart vektor grafikkelement) Element for å legge til grafikk i“”Element.
• Neste, en “”Element er lagt til med klassen erklært som“rektangel”.
• Inline CSS -styling i “”Tag definerer fargen på rektangelet som“lilla" gjennom "Fyll: lilla”Eiendom.
• “bredde" og "høyde”Inline -egenskaper definerer henholdsvis den horisontale og vertikale lengden på rektangelet.

Følgende vil være resultatet generert gjennom ovennevnte kodebit:

Vi har demonstrert to metoder for å tegne et rektangel.

Konklusjon

Et rektangel kan trekkes enkelt mens du bruker inline styling. I dette tilfellet er det ganske enkelt påkrevd å legge til "margin”,“høyde”Og“bredde”Egenskaper i åpningskodene til elementene. Mens du legger til et eget CSS -stilelement, kan du legge til "høyde”,“bredde”Og“farge”Egenskaper i CSS -stilelementet. Denne bloggen diskuterte tilnærmingene for å tegne et rektangel i HTML eller CSS.