html

CSS Polygon

“You must have remembered that when we were in middle school, we used to take drawing sessions to learn drawing. We have tried almost every type of shape creation and drawing in drawing books, i.e., circle, rectangle, square, triangle, polygon, and many more. One of those shapes is “Polygon”. A Polygon is said to be a shape with many sides. Within HTML, we can also create a polygon shape of images or containers or simply try a vector-based polygon creation. In this tutorial, we will be consuming some examples to create polygons of all those types.”

Example 01

Let’s look at our first HTML example to create a polygon on the HTML webpage. For this, we need to generate a standard HTML “.html” document in Visual Studio Code. We have started the HTML example with the standard HTML format of tags used to create a page, i.e., HTML, head, style, body, etc. The head element tag of this code contains a simple “title” tag containing a title for this page. The head tag also contains styling for this webpage, but we will be skipping its explanation for a while. Within the body tag of this HTML code, we have been using a heading tag for the standard size 1 heading of HTML, i.e., h1.

A “div” tag is used to create a container in the HTML webpage. This container would contain an image using the “img” tag followed by the “src” attribute to attach the path of an image with the attribute “alt” set to “Bitcoin”. After this container, our HTML page would contain a long paragraph of text via the use of the <p> tag for HTML paragraphs. Our HTML page scripting has been completed here. So, we are closing the body tag as </body>.

Now, we will be taking a look at the style tag to add some styling to the “div” container of our HTML script to create a polygon shape. Firstly, we have been using the float property of CSS to pull the container to the left side of the HTML page along with a width of 250px and height of 160px. We have been setting the shape of the outside of a container to the polygon.

After that, the image has also been converted to the polygon shape via the use of the standard WebKit clip-path property. This property uses the polygon() function to create a polygon of the same percentage values that we have used for the container. The style and head tags have been completed, and we are going to execute this code.

After running this HTML code within the Chrome or Internet Explorer browser, we have got the shown-below output. The standard polygon shape has been given to the container, and the image has been added to this container by converting it to a polygon shape. At the same time, the text paragraph has been displayed with the relative position of the polygon container on our screen.

Example 02

The first example was all about the use of a simple polygon function with the clip-path property to clip the image and convert it to a polygon shape. Within this example, we will be creating a polygon of at least 4 edges with the help of simple polygon property or tag. So, we have started the example with the HTML identifier tracked by the head tag. This head tag uses the title tag to give a title to our HTML page. We have not been using any style tag because we will be performing the inline styling in this example code. So, the “body” of this HTML page has been started with the “body” tag, i.e., <body>. It follows the heading tag <h1> for this page.

After this, we have been utilizing the “SVG” standard tag to make use of standard vector graphics for the creation of a polygon shape. The height and width have been set to 400px for the “SVG” area on the HTML page. We have started the tag with the offset “points” to be used for the creation of a polygon. These points would be telling you the x and y value for the specific edge. You can use as numerous edges as possible. We have been using only 5 as per the total number of commas. The inline styling has been used with the keyword “style,” and we have been using the property “fill” to fill the polygon with some light green color selected from the RGB standard color scheme. Along with that, the stroke property has been used to create a border outline for the polygon of some purple color, and the stroke-width property has been setting the thickness of the polygon border to 7px. The “SVG” and body of this page have been completed, and we can execute this code in the Visual Studio code now.

The output for the polygon HTML code has been displaying a simple heading with a polygon of 4 sides. Although it has 5 sides, the 5th one is hidden due to the use of a small value for one side. You can see that the polygon shape has been filled with a light green color and a purple border.

Example 03

Let’s take a look at another example to create a polygon shape on our HTML page. For this, we will be consuming a similar SVG tag in our HTML code. So, starting from the Visual Studio code file, we have added an html tag followed by the standard <body> tag. This time, we are not using the head, title, or style tag because we can perform all the vector decoration using the simple SVG tag within the body of an HTML code.

Within the body tag of this code, we have started the <svg> tag and specified the width and height for the SVG area on the HTML page. After that, we used the polygon tag to create a new polygon and added its points and style. We have been adding a total of 5 edges or points for this polygon with the different x and y-axis values. These edges are placed at the set positions according to the HTML page. The polygon will be filled with purple color, and its background will be of crimson pink color. Along with that, the stroke-width property has been fixed to 5, and the fill rule has been set to odd. This means that where the edges of a polygon intersect, the color would be filled there only.

After running this HTML code in the Chrome browser, we have got the shown-below output, i.e., star polygon, at the webpage screen. This star polygon got 5 edges with a crimson, pink border and filled cones. You can see that the inner area of a star has been left unfilled. It’s because we have used the fill-rule property set to even-odd.

Conclusion

Within the first paragraph, we have discussed the use and evolution of shapes in our life along with their use in HTML scripting. Along with that, we have elaborated three very different examples of HTML scripting to create different types of polygons, i.e., each contains a different number of sides and edges. For this, we tried to use the polygon function, polygon tag, and SVG tag to create Vector based shapes, clip-path properties, polygon points, and stroke properties.

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.