The power of css is unparalleled. Sometimes it may act like a saviour, because it can result in boosting your website performance. As we know the minimal use of images in website results in better performance, because it will reduce the number of files requested to the server and reduces the time to download those files to browser. We can make some shapes using css too, here we will see how to make a triangle in css.

We can make triangle in css pointing in any direction ( Up, Down, Right, Left ).

Following code will draw those triangles.


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

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

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

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

Here we have four divisions, you can determine their significance or direction from their class names.

Now we will write css and apply to above div’s to generate triangles.

.triangle-up {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
}

.triangle-down {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #f00;
}

.triangle-right {
	width: 0;
	height: 0;
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	border-left: 60px solid green;
}

.triangle-left {
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right:10px solid blue;
}

We are playing here just with the borders, putting height and width of div as zero. Notice that if you want up triangle i.e. pointed towards upward direction, then we should skip same direction’s border and apply style to remaining borders i.e. down, left and right.

Please see the demo below.

Comment form below is waiting to listen to your thoughts 🙂

CSS Triangle

Leave a Reply

Your email address will not be published. Required fields are marked *