Cómo dibujar un rectángulo en HTML o CSS

Se puede crear un rectángulo utilizando HTML, así como una combinación de HTML y CSS. Mientras usa las propiedades CSS para dibujar un rectángulo, simplemente se requiere agregar el selector relevante del elemento HTML y aplicar algunas propiedades de estilo en el elemento de estilo CSS. Pero, si el desarrollador quiere dibujar un rectángulo sin agregar un elemento de estilo CSS separado, el estilo en línea se puede usar dentro de las etiquetas de apertura HTML.

Este artículo explicará cómo dibujar un rectángulo a través de los siguientes métodos:

• Método 1: dibujar un rectángulo usando CSS
• Método 2: dibujar un rectángulo usando HTML

Método 1: dibujar un rectángulo usando CSS

Para dibujar un rectángulo usando el elemento de estilo CSS, se debe agregar un elemento HTML simple asignándole una clase o una identificación. Luego, las propiedades se pueden aplicar al elemento a través del ID o selectores de clase. Da forma al elemento en forma de rectángulo.

Ejemplo
Entendamos el concepto anterior con la ayuda de un ejemplo:

En la declaración HTML anterior, un ""El elemento contenedor se ha agregado con una clase declarada como"rectángulo".

Después de crear un "El elemento ", las propiedades CSS se pueden aplicar para representar el contenedor DIV como un rectángulo en la interfaz de salida:

.rectángulo

Ancho: 300px;
Altura: 150px;
Antecedentes: rosa;
margen izquierda: 25%;

En el fragmento de código anterior:

• El selector de clases ".rectángulo"Se ha agregado para referirse al elemento contenedor Div respectivo.
• Dentro del selector de clases, el "ancho"La propiedad se ha agregado y definido como"300px". Esto establecerá el ancho del rectángulo en 300 píxeles.
• Del mismo modo, el "altura"La propiedad establece la altura del rectángulo a"150px".
• "fondo"La propiedad se ha definido como"rosa". Esto coloreará el rectángulo de rosa.
• El "margen de pesaSe acaba de agregar una propiedad para mover el rectángulo ligeramente hacia la derecha para una mejor representación visual del rectángulo.

Esto creará un rectángulo en la página web:

Método 2: dibujar un rectángulo usando HTML

Otro enfoque es agregar todas las propiedades necesarias para dibujar un rectángulo en las etiquetas de apertura HTML.

Ejemplo
Entendamos esto con un ejemplo simple agregando la etiqueta HTML "" dentro de la etiqueta "" (ambas dentro de la etiqueta DIV principal):

En el fragmento de código anterior:

• A ""Se ha agregado elemento contenedor para crear un DIV con la identificación"recto".
• Dentro de la etiqueta Div de apertura, el CSS en línea "margen"La propiedad define la posición de colocación vertical del rectángulo o el DIV como"100px"Y la posición de colocación horizontal como"150px".
• Dentro de ""Elemento está el""(Elemento de gráficos vectoriales escalables) para agregar gráficos al"" elemento.
• A continuación, un ""El elemento se ha agregado con la clase declarada como"rectángulo".
• El estilo CSS en línea en el ""La etiqueta define el color del rectángulo como"púrpura" a través de "Llenarse: morado" propiedad.
• El "ancho" y el "altura"Las propiedades en línea definen la longitud horizontal y vertical del rectángulo respectivamente.

El siguiente será el resultado generado a través del fragmento de código anterior:

Hemos demostrado dos métodos para dibujar un rectángulo.

Conclusión

Se puede dibujar un rectángulo fácilmente mientras se aplica un estilo en línea. En este caso, simplemente se requiere agregar el "margen","altura" y "ancho"Propiedades en las etiquetas de apertura de los elementos. Al agregar un elemento de estilo CSS separado, agregue el "altura","ancho" y "color"Propiedades en el elemento de estilo CSS. Este blog discutió los enfoques para dibujar un rectángulo en HTML o CSS.