CSS Hexagon

“A Cascading style sheet is a piece of code that is used to add effects and extra features in the working of Hypertext markup language tags. HTML code is an essential part of building and developing websites. And similarly, without CSS, only HTML use is not sufficient, which leads to excess. HTML, CSS, and javascript are three basic tools combined to serve in many areas, including static webpages and dynamic websites, applications, etc. Moreover, while developing any website in another programming language, i.e., C sharp, HTML and CSS also play a vital role. In short, HTML creates the objects, and CSS designs them. This article is about designing a polygon in a webpage.

A Hexagon is a mathematical, geometrical shape called a polygon having 6 edges. To design a hexagon, we will use HTML and CSS.”


CSS is mainly of three types. Each type depends on the location of its declaration. One is inline, which is written inside the HTML tags. The second one is internal, written in the head portion of HTML tags. Whereas the third one is external CSS, which is declared outside the HTML code and the HTML file in another file with the css extension. We will go with the internal CSS in designing hexagon. The opening and closing tags for the internal CSS are:

<style> </style>


The basic tools used to create a simple static webpage are a text editor and any browser. You can use any text editor, but in this article, we are using a simple Windows default text editor and Chrome as a browser. We write the HTML code or tags in the editor and execute that file on the browser.


There are not some prerequisites regarding any tool or any software. But the user must have some know-how of HTML tags, as the basics are required in building a hexagon and designing it. HTML tags contain two major parts, head and the body.


<head> </head>

<body> </body>


While some other tags will be explained with code at the time of implementation.

Implementation of Hexagon

For the implementation, open the notepad and start the HTML code. Inside the head portion, we have used the title name as a hexagon; this will appear in the tab. Heading towards internal CSS. Inside the Style tag, we have created an explanation of the hexagon class.

In CSS, mainly in internal and external styling, to make the code short and easily understandable, we make use of ids and classes. Here the question arises of how these classes and id work. All the features and effects that we want to apply to any object we are creating are mentioned inside the class or the id’s body. These ids and classes are accessed by using their names inside the tags where we want to apply any effect. So here, we have created a hexagon id inside the style tag. This id will be applied at the time of creating the hexagon. Inside the hexagon body, we have declared a location to draw the shape; for this, we have used two features, one is the top, and the other one is the left. The “top” decides the distance from the top to the shape. And the left decides the distance from the left border to the shape. It can be written in percentage or any other unit.

Top: 20;

Left: 10%;

The marginal border is set as auto. In this way, the location of the shape is all set. Now we will apply a color to the shape. This is given to be the background color. We have chosen the magenta.

Background-color: magenta;

The polygon hexagon is formed by having corners or curved points. To make the points curved, we will add a feature of border radius to make it smoothly curved instead of having rough edges.

Border-radius: 10px;

Here the value is written in the pixels unit. Now we will decide to give the shape, height, and width. These two features are the building block to creating and styling a shape. Any shape or any text is always recommended to be written or drawn inside a specified box. This box helps in deallocating the object very easily. So we have declared a border box here.

CSS | Pseudo Elements/Class Property

This property is used to rotate the lines of shape at 60 degrees, making a perfect hexagon. A CSS pseudo-element is a type of styling that is used to style a particular part of the element. For instance, it styles the first line of the shape. All these contents are applied before and after the contents of the shape. We can apply any feature in this manner.

The content and the border are some built-in features of pseudo property. All other features of height, width, and color are the same as we have described in the simple id description of the hexagon.

Now all the above features are declared as two portions to be applied to form a hexagon.

.hexagon : before {
Transform : rotate (60deg);

A similar feature is for the remaining portion of the hexagon; all the shapes are created by using a specified angle for polygon 60 degrees are formed between every two alternative lines.

The style and the head tags are closed now. Make sure all the tags you opened must be closed to make them applied in the code; otherwise, some effects may be lost. Now leading towards the body part.

Here we have used a simple heading of text to write a line. This style is an example of inline styling.

< body style = "text-align : left"<

We have given an alignment to the text to be displayed on the left side of the web page and given the font color as black.

After the text, we will declare the code for the hexagon shape. DIV is a container like a table in HTML. That is used to contain objects in a straight position. Inside the div body, the CSS class and the id name are declared to apply all the features on the div container of the shape. Close all the opened tags, i.e., Div, body, and Html.

We save the file of the notepad with the “.html” extension to create a webpage. This file is saved as “sample.html.” So by using this extension, the icon of the file will be set as the icon of the default browser.

When we run the file in the browser, it will display a webpage having a heading and a hexagon shape on the left side of the page.


A hexagon diagram is formed by using HTML embedded with cascading style sheet with it. At the start, we talk about the basics of HTML. And the types of CSS are also explained to eliminate any sort of ambiguity regarding CSS types. Two basic tools are mentioned that are essential for the creation and execution of HTML and CSS tags. The hexagon example is implemented and explained line-by-line with the code and its usage. A unique way of creating a shape is explained through the CSS pseudo-element property. In the end, we have shown the static webpage that is formed as a result of the defined code.


About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.