Shapes by border property

It is possible to make a shape of right triangle, isosceles triangle and many more. See the following shapes to grasp the idea of border-width.

See the example below to understand. content:""; property is set for the following boxes.

In the above given shapes, the concept of border-width is used to make such kind of shapes. These shapes demonstrate the idea of border-width.

How to make a right triangle by border-width property

Following the same rule as given in the above example, we can make right triangle by border-bottom and border-right properties.

<style>
div{
 position:absolute;
 content:"";
 border-bottom:40px lightblue solid;
 border-right:30px solid transparent; 	 
}
</style>
Try </>

The color of border-right is set to transparent.

How to make an isosceles triangle by border-width property

In this case, the color of border-left and border-right is set to transparent.

<style>
div{
 position:absolute;
 content:"";
 border-bottom:40px lightblue solid;
 border-right:30px solid transparent;
 border-left:30px solid transparent; 	 
}
</style>
Try </>

The size of triangle can be defined by the value of border properties.

The shape of a triangle by border-width

See how border-width plays an important role in making such kind of shapes.