How to create and use CSS triangle?

CSS Triangle: In this tutorial, we will learn how to create and use triangles in CSS with the help of examples. By Anjali Singh Last updated : July 11, 2023

Introduction

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.

CSS Shapes

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

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.

Syntax to create CSS triangle

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

Example to create CSS triangle

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            width: 0;
            height: 0;
            border-left: 200px solid transparent;
            border-right: 200px solid transparent;
            border-bottom: 200px solid #f40;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

Output

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

CSS Examples »

How to remove the space between inline-block elements?

How to horizontally center a DIV using CSS?