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.

Example

border-width:20px;
border-width:30px;
border-width:40px;
border-width:50px;
Try </>

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.

Example

<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.

Example

<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.

content:"";

border-width:20px;

The border is always defined inside the box and not outside the box.

Was this article helpful?