Triangles in Pure CSS

Today we will learn how to create shapes in CSS.

What is CSS?

CSS is a Cascading style sheet. We can create UI for modern web pages with CSS. W3C first introduced CSS on December 17, 1996. And Håkon Wium Lie is the father of CSS.

What is a shape in CSS?

In Math, You can define a shape as the outline or as the form of an object, This is true for CSS as well, but in CSS it is in 2D form.

Why do we need to create shapes in CSS?

Shapes are an important part of the UI. If you are a UI designer, then you should know that how important are shapes.
Everything in the UI is some kind of a shape. It is very helpful when creating the UI.
You can create new and complex shapes using some simple shapes.

Triangle shape in CSS

First we will write HTML
<div>
<div class="triangle">
</div>
</div>
Coll
Now we will write CSS to create our triangle.
.triangle {
height: 0;
width: 0;
border: 25px solid transparent;
border-bottom: 50px solid orange;
}

There you go. Our Pure CSS triangle.

The Full article is on my website, where I explaned every step of it and many more new shapes.