Four Simple Ways to Draw a Rectangle in HTML
This article will introduce four basic methods for drawing shapes on web pages: using HTML and CSS, using CSS only, using SVG, and using HTML canvas elements.
Key Points
- The four basic methods of drawing shapes on web pages are: using HTML and CSS, using only CSS, using SVG, and using HTML canvas elements.
- HTML and CSS can be used to create simple shapes such as rectangles and circles, while using CSS alone can create shapes through pseudo-elements such as
::beforeor::after. SVG allows creating more complex shapes, while HTML canvas elements can be used to create graphical and interactive features. - The method of selecting the drawing shape in HTML depends on the desired result. HTML and CSS are ideal for creating content containers and decorative elements; CSS pseudo-elements can be used to add decorative modifications and tooltips; SVG is ideal for lightweight, responsive shapes; HTML canvas elements are powerful and can be used to create graphical and interactive Features, but requires a deeper understanding of JavaScript.
Draw rectangles using HTML and CSS
Creating shapes using HTML and CSS is very simple. We can use the div element to set its width and height, as well as borders and/or background colors:
div {
width: 500px;
height: 200px;
border: 10px solid #2196F3;
background-color: #f7f7f7;
}The following CodePen example shows the results.
[CodePen sample link - please replace with the actual CodePen link]
Note: In the above example, the div element is centered using a CSS Grid.
Of course we can also place content in the rectangle. Please try it in the CodePen example above.
We can also draw other shapes with the help of the border-radius attribute, such as circles:
div {
width: 200px;
height: 200px;
border: 10px solid #f32177;
background-color: #f7f7f7;
border-radius: 50%;
}[CodePen sample link - please replace with the actual CodePen link]
We can also draw ellipses:
div {
width: 500px;
height: 200px;
border: 10px solid #f37f21;
background-color: #f7f7f7;
border-radius: 50%;
}[CodePen sample link - please replace with the actual CodePen link]
We can even try more peculiar shapes, such as:
div {
width: 200px;
height: 200px;
border: 10px solid #ed21f3;
background-color: #f7f7f7;
border-radius: 50% 25%;
}[CodePen sample link - please replace with the actual CodePen link]
Further reading:
- Learn more about the usage of
border-radiusattributes.
Draw rectangles using CSS only
In the example above, we used HTML elements to create shapes. Now let's just use CSS.
To do this, we will use CSS ::before pseudo-element. (We can also use ::after).
The following is what we can do:
body::before {
content: '';
width: 500px;
height: 200px;
border: 10px solid #21f348;
background-color: #f7f7f7;
}[CodePen sample link - please replace with the actual CodePen link]
We are creating a pseudo-element attached to the <body> element and then style it like the ones facing the div element above. We can also add content to this shape by placing text, images, etc. between quotes of the content attribute, such as content: 'This is some content!'.
Further reading:
- You can learn more about
::beforeand::afterin our CSS Pseudo-Elements Guide.
Draw rectangles using SVG
SVG allows us to create very complex shapes in HTML. Here is a simple example of how to create a rectangle:
div {
width: 500px;
height: 200px;
border: 10px solid #2196F3;
background-color: #f7f7f7;
}[CodePen sample link - please replace with the actual CodePen link]
Further reading:
- Learn more about SVG.
- You can read more about using SVG on MDN.
Create rectangles using HTML canvas elements
We can also create shapes using HTML canvas elements. We first create a canvas element in HTML and set the width and height:
div {
width: 200px;
height: 200px;
border: 10px solid #f32177;
background-color: #f7f7f7;
border-radius: 50%;
}Then we add the following JavaScript:
div {
width: 500px;
height: 200px;
border: 10px solid #f37f21;
background-color: #f7f7f7;
border-radius: 50%;
}The following CodePen example shows the results.
[CodePen sample link - please replace with the actual CodePen link]
Further reading:
- Read about the canvas element on MDN.
- Read our article on Canvas vs SVG.
Summary
In this article, we introduce four simple ways to draw shapes in HTML. Which method we should use depends on what we want to achieve.
Drawing shapes in HTML and style them using CSS is very common and ideal when creating content containers for HTML pages. These styled elements can also be used for decorative purposes. (Check out CodePen for thousands of creative ways to create amazing works of art using HTML and CSS.)
Creating shapes using CSS pseudo-elements is very convenient for adding decorative modifications and tooltips to web pages.
SVG is an excellent tool for creating lightweight, responsive shapes for web pages. SVG codes can be embedded in our HTML pages, or we can link to SVG files like linked images and embed them into the page in this way.
<canvas></canvas> Element is a powerful platform that can be used to create a variety of graphics and other interactive features on web pages, but it usually requires a fairly in-depth understanding of JavaScript.
Finally, if you want to take the creation of shapes in HTML to the next level, you can also check out the following wonderful examples of using CSS clip-path:
- Introduce the CSS
clip-pathproperties and show how to animate shapes. - Create a squeaky portrait using the CSS
path()function, showing how to useclip-pathwith SVG.
FAQs on how to draw rectangles in HTML
(The FAQ part mentioned in the original text should be added here, and the content should be rewrited with pseudo-original originality to keep the original intention unchanged)
Please note that since the CodePen link is not accessible, I replaced the link with a placeholder. Please replace it with the actual CodePen link yourself.
The above is the detailed content of Four Simple Ways to Draw a Rectangle in HTML. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1657
14
1415
52
1309
25
1257
29
1231
24
Google Fonts Variable Fonts
Apr 09, 2025 am 10:42 AM
I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
Apr 11, 2025 am 11:29 AM
Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more
HTML Data Attributes Guide
Apr 11, 2025 am 11:50 AM
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
A Proof of Concept for Making Sass Faster
Apr 16, 2025 am 10:38 AM
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
How We Created a Static Site That Generates Tartan Patterns in SVG
Apr 09, 2025 am 11:29 AM
Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan
How to Build Vue Components in a WordPress Theme
Apr 11, 2025 am 11:03 AM
The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.
PHP is A-OK for Templating
Apr 11, 2025 am 11:04 AM
PHP templating often gets a bad rap for facilitating subpar code — but that doesn't have to be the case. Let’s look at how PHP projects can enforce a basic
Programming Sass to Create Accessible Color Combinations
Apr 09, 2025 am 11:30 AM
We are always looking to make the web more accessible. Color contrast is just math, so Sass can help cover edge cases that designers might have missed.
