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
::before or ::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-radius attributes.
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
::before and ::after in 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-path properties and show how to animate shapes.
- Create a squeaky portrait using the CSS
path() function, showing how to use clip-path with 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!