How to Create Triangle on HTML Template

Sometimes we need to create various types of shapes in our HTML template. But many people don’t know how to create those shapes. That’s why they have shown shape as an image element. In this article, I will show you how to create a triangle on your HTML page.

If you want to create a triangle into the HTML Template, you have to know about CSS border elements. Because of that, many designer triangles create with border elements. You can use SVG as an alternative way to create a triangle.

Let’s start

Please put the following HTML codes into the desired file where you want to create a triangle.

Create HTML Markup

<div class="triangle"></div>

I have created a class with an HTML div tag for initializing where I will create a triangle.

Now, add following CSS code into the stylesheet. Remember that, you have to link your stylesheet file with HTML file. Otherwise, It can’t work.

Put CSS styles for upper headed triangle.

.triangle {
 height: 0;
 width: 0;
 border-bottom: 100px solid #000;
 border-left: 50px solid #000;
 border-right: 50px solid #000;
}

This codes will make a triangle shape with upper head. Sometimes, you need to create this shape different head. Like left or right headed triangle. Don’t worry…

For CSS styles for down headed.

If you want to create triangle shape with down head, you can try with following codes

.triangle {
 height: 0;
 width: 0;
 border-top: 100px solid #000;
 border-left: 50px solid #000;
 border-right: 50px solid #000;
}

For CSS styles for left headed.

For left head, you can use following codes.

.triangle {
 height: 0;
 width: 0;
 border-right: 100px solid #000;
 border-bottom: 50px solid #000;
 border-top: 50px solid #000;
}

Use CSS styles for right headed.

For right head, you can use following codes.

.triangle {
 height: 0;
 width: 0;
 border-left: 100px solid #000;
 border-bottom: 50px solid #000;
 border-top: 50px solid #000;
}

I hope you can understand how to create this type of shapes in HTML template. If you face any type of problem with this codes, you can contact with me. I will try to help you. Don’t worry…

It should be free for you. Because of that, I always try to help others.

If you like my article, you can read another How to install WordPress in your server.