Creating Shapes using HTML and CSS
March 08, 2016 written by Eric
Gone are the days where shapes needed to be created using a graphic editing software. Today, with a little bit of HTML and some CSS, we can easily accomplish the same things through just the code!
Excited to learn more? Let’s get started!
Making a Square
This is one of the most basic shapes to make on your web browser.
You can take a look at the code we have used by switching to the HTML and CSS tabs in the example above.
All we have done is used a div element (a container) in the HTML code and attached three CSS rules (2 dimensions and a background color) for this element. In the CSS presentation, the default shape of an element is a rectangle. By setting the width and height of the element to the same value, we can make a square.
Making a Diamond
There are several methods to create this shape. Let us look at one of the ways of doing this.
Simple, isn’t it? The concept is to just make a simple square and give it a tilt. We can do this using the transform property, which is a really powerful tool to make geometric changes to the appearance of an element. Even three dimensional rotation is possible by using the rotate3d() function as its value.
Making a Circle
Let us try to make a circle next.
Still pretty simple, isn’t it? We can see that only one line has been altered from the previous code. That is the border-radius property which has a value that is half of one dimension. The border-radius property is mainly used for making a rectangle with rounded corners. The value of the property specifies the roundness of the corners (A rounded corner is regarded as an arc of a circle in the computer field. That is why the property defines the “radius” of the circle). If this value for all four corners are half of the width/height of its base rectangle, the result shape becomes a circle as no straight parts can be left in its sides.
By the way, this example reminds me of my home country’s flag
Making a Triangle
Let’s make a triangle now.
How does this work?
We can make a triangle without using any graphic software or complicated scripts!
Just keep three things in mind:
(1) Make the element box of the smallest size which means 0 width and 0 height
(2) Add a thick border to the bottom and both sides of the box
(3) Make the left and right borders invisible using the transparent color value.
Fortunately, web browsers show this as a diagonal point of contact between the two adjacent borders – like an oblique side of a triangle.
Making a Star
Let us try to make something a little more impressive now.
Instead of defining three different HTML elements for making one sign (a single entity), we can use the ::before and ::after CSS pseudo-classes to generate two pseudo elements inside the div element.
On doing that, we can just fill the div with red color, the ::before element with green, and the ::after with blue. Then, simply put them together by utilising the position property!
Making a Check Mark
This is the easiest thing to accomplish in this article.
You just need to find the Unicode character for a check mark (http://unicode-table.com/en/).
Unicode is the de facto standard character set in the Web Development field.
You can do this not only with a check mark, but also with many other signs often used in writing that are registered as one of the Unicode characters. In this case, I used ✓ as an HTML entity of the check mark.
I hope you feel motivated to give these examples a try! Once you get used to the coding technique, your website will become more expressive and interactive. Please use these concepts in your portfolio or real-life projects, and make your audience much happier. I am looking forward to seeing your great work in the near future.