Come disegnare un rettangolo in HTML o CSS

Un rettangolo può essere creato utilizzando HTML e una combinazione di HTML e CSS. Durante l'utilizzo delle proprietà CSS per disegnare un rettangolo, è semplicemente necessario aggiungere il selettore pertinente dell'elemento HTML e applicare alcune proprietà di stile nell'elemento in stile CSS. Ma, se lo sviluppatore vuole disegnare un rettangolo senza aggiungere un elemento in stile CSS separato, lo stile in linea può essere utilizzato all'interno dei tag di apertura HTML.

Questo articolo spiegherà come disegnare un rettangolo attraverso i seguenti metodi:

• Metodo 1: disegnare un rettangolo usando CSS
• Metodo 2: disegnare un rettangolo usando HTML

Metodo 1: disegnare un rettangolo usando CSS

Per disegnare un rettangolo usando l'elemento in stile CSS, è necessario aggiungere un semplice elemento HTML assegnandolo una classe o un ID. Quindi, le proprietà possono quindi essere applicate all'elemento tramite i selettori ID o classe. Modella l'elemento sotto forma di un rettangolo.

Esempio
Comprendiamo il concetto di cui sopra con l'aiuto di un esempio:

Nella dichiarazione HTML sopra, a ""L'elemento container è stato aggiunto con una classe dichiarata come"rettangolo".

Dopo aver creato un ""Elemento, le proprietà CSS possono essere applicate ad esso per rappresentare il contenitore Div come rettangolo nell'interfaccia di output:

.rettangolo

larghezza: 300px;
Altezza: 150px;
Sfondo: rosa;
Margin-Left: 25%;

Nel frammento di codice sopra:

• Il selettore di classe ".rettangolo"È stato aggiunto per fare riferimento al rispettivo elemento del contenitore div.
• All'interno del selettore di classe, il "larghezza"La proprietà è stata aggiunta e definita come"300px". Questo imposterà la larghezza del rettangolo su 300 pixel.
• Allo stesso modo, il "altezza"La proprietà imposta l'altezza del rettangolo a"150px".
• "sfondo"La proprietà è stata definita come"rosa". Questo colora il rosa rettangolo.
• IL "margine-sinistra"La proprietà è stata appena aggiunta per spostare leggermente il rettangolo a destra per una migliore rappresentazione visiva del rettangolo.

Questo creerà un rettangolo sulla pagina web:

Metodo 2: disegnare un rettangolo usando HTML

Un altro approccio è quello di aggiungere tutte le proprietà necessarie per disegnare un rettangolo nei tag di apertura HTML.

Esempio
Comprendiamo questo con un semplice esempio aggiungendo il tag HTML "" all'interno del tag "" (entrambi all'interno del tag Div principale):

Nel frammento di codice sopra:

• UN ""L'elemento contenitore è stato aggiunto per creare un div con l'ID"retto".
• All'interno del tag DIV di apertura, il CSS in linea "margine"La proprietà definisce la posizione di posizionamento verticale del rettangolo o del div come"100px"E la posizione di posizionamento orizzontale come"150px".
• Dentro il ""Elemento, c'è il""(Elemento grafico vettoriale scalabile) Elemento per aggiungere grafica a""Elemento.
• Successivamente, a ""L'elemento è stato aggiunto con la classe dichiarata come"rettangolo".
• Lo stile CSS in linea nel ""Tag definisce il colore del rettangolo come"viola" tramite la "Riempi: viola" proprietà.
• IL "larghezza" e il "altezza"Proprietà in linea definisce rispettivamente la lunghezza orizzontale e verticale del rettangolo.

Quanto segue sarà il risultato generato attraverso lo snippet di codice sopra:

Abbiamo dimostrato due metodi per disegnare un rettangolo.

Conclusione

Un rettangolo può essere disegnato facilmente durante l'applicazione di uno stile in linea. In questo caso, è semplicemente necessario aggiungere il "margine","altezza" E "larghezza"Proprietà nei tag di apertura degli elementi. Aggiungendo un elemento in stile CSS separato, aggiungi il “altezza","larghezza" E "colore"Proprietà nell'elemento in stile CSS. Questo blog ha discusso degli approcci per disegnare un rettangolo in HTML o CSS.