Create a isosceles triangle with HTML and CSS

Developers often face difficulty while creating triangular shapes with HTML and CSS. This tutorial is about creating an isosceles triangular shape with HTML and CSS only.

The following is an isosceles triangle. An isosceles triangle has not a right (90 degrees) angle and has two sides of equal length.

You must specify the box-sizing: border-box; to get the desired shape of triangle.

Now, let's learn how to make an isosceles triangle.

Define width of the .comment class element.

<style>
.comment{
 width:200px;
 background:lightgreen;
}
</style>
Try </>

Now specify the border properties to look like a triangle.

<style>
.comment{
 border-bottom: 200px solid lightgreen;
 border-right: 100px solid transparent;
 border-left: 100px solid transparent;
}
</style>
Try </>

Actually, transparent borders cover up the lightgreen border so that it looks like a triangle.

Remember that the two sides should be of equal length as in the above example to make it an isosceles triangle.