How to create and use CSS triangle?

CSS Triangle: Here, we are going to learn how to create an use triangles in CSS (Cascading Style Sheet)?
Submitted by Anjali Singh, on February 23, 2020


We can do so much in web development that it makes everything just simply interesting. You can style your websites or web pages in any way you want. You can add animations to your websites or web pages and lots more. The thing is that styling is very important for web development as it completes your website or web page entirely. In case you have not styled your website or web page properly then nobody would like to have a look at your website or web page and all of your efforts and hard work will go in vain. So, practice styling your website or web page as much as you can. You can try different types of templates or layouts and there is much more, all you need to do is explore.


Since the talk is all about styling, why don't we take this discussion a bit further and talk about shapes in CSS? You read that right, with the help of CSS we can make as many shapes as we want. From triangle to square to a rectangle and many more. All you need to do is set the size and shape with precise measurements and you will be able to create various shapes just by making use of CSS.

In this article, we will learn about one particular shape that is a triangle. We will learn how we can create triangles with the help of CSS? So, keep on reading because things are about to get interesting.


Creating a triangle using CSS is not very easy as it sounds. There is a very neat trick to do that. The basic idea behind creating a triangle is that first imagine a transparent box with borders on all sides. Now imagine that the borders are meeting each other on either end. Now what you need to do is set the width and height of this box as 0 and make the right border, left border and the bottom border is transparent. After doing this, all that would be visible in the top border in the shape of a triangle and there you go, that is how you create a triangle?

Well, yes it might sound confusing at first but with the help of an example, you will be able to do it in no time. So go ahead and try it out yourselves and whenever you find yourself in doubts, you can always come back to the article.


Element {
    width: 0;
    height: 0;
    border-left: value px solid transparent;
    border-right: value px solid transparent;
    border-bottom: value px solid color;


<!DOCTYPE html>


        div {
            width: 0;
            height: 0;
            border-left: 200px solid transparent;
            border-right: 200px solid transparent;
            border-bottom: 200px solid #f40;




Creating Triangle in CSS

In the above example, change the values of the borders and resize your triangle.

CSS Tutorial & Examples »



Comments and Discussions!





Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© some rights reserved.