Creating Shapes using HTML and CSS

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.

Wrapping Up

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.