This article will explain how to draw a rectangle through the following methods:
Method 1: Drawing a Rectangle Using CSS
To draw a rectangle using the CSS style element, a simple HTML element has to be added by assigning it a class or an id. Then, the properties can then be applied to the element through the id or class selectors. It shapes the element in the form of a rectangle.
Example
Let’s understand the above concept with the help of an example:
In the above HTML statement, a “<div>” container element has been added with a class declared as “rectangle”.
After creating a “<div>” element, the CSS properties can be applied to it to represent the div container as a rectangle in the output interface:
{
width: 300px;
height: 150px;
background: pink;
margin-left: 25%;
}
In the above code snippet:
- The class selector “.rectangle” has been added to refer to the respective div container element.
- Inside the class selector, the “width” property has been added and defined as “300px”. This will set the rectangle width to 300 pixels.
- Similarly, the “height” property sets the height of the rectangle to “150px”.
- “background” property has been defined as “pink”. This will color the rectangle pink.
- The “margin-left” property has just been added to move the rectangle slightly to the right for a better visual representation of the rectangle.
This will create a rectangle on the web page:
Method 2: Drawing a Rectangle Using HTML
Another approach is to add all the properties required to draw a rectangle in the HTML opening tags.
Example
Let’s understand this with a simple example by adding the HTML “<rect>” tag inside the “<svg>” tag (both inside the main div tag):
In the above code snippet:
- A “<div>” container element has been added to create a div with the id “rect”.
- Inside the opening div tag, the inline CSS “margin” property defines the vertical placement position of the rectangle or the div as “100px” and the horizontal placement position as “150px”.
- Inside the “<div>” element, there is the “<svg>” (scalable vector graphics element) element to add graphics to the “<div>” element.
- Next, a “<rect>” element has been added with the class declared as “rectangle”.
- The inline CSS styling in the “<rect>” tag defines the color of the rectangle as “purple” through the “fill: purple” property.
- The “width” and the “height” inline properties define the horizontal and vertical length of the rectangle respectively.
The following will be the result generated through the above code snippet:
We have demonstrated two methods to draw a rectangle.
Conclusion
A rectangle can be drawn easily while applying inline styling. In this case, it is simply required to add the “margin”, “height” and “width” properties in the opening tags of the elements. While adding a separate CSS style element, add the “height”, “width” and “color” properties in the CSS style element. This blog discussed the approaches to draw a rectangle in HTML or CSS.
