If you are really excited about making shapes , then you are at the right place ! As we will progress through this series , we will learn to create more cool shapes using only CSS.

New to HTML and CSS ?

Check out my channel for more HTML and CSS guides 👇

youtube.com/channel/UCWw7u5X8FILQ3zStUkxLVRw

If you want to have a quick look at some basic shapes the head over to this blog 👇 Shapes In CSS Part 1

Now let's dive into the code !

1) Triangles

Triangles are shapes which have three sides and can be og many types . For example equilateral , scalene or isosceles triangles.

Now to achieve such a shape in CSS , we will make use of borders .

Why exactly ? Have look at the following Codepen 👇

As you can see above , the four borders of the box meet at angles . So if we were to omit any of these we must end up with a triangle. Right?

Probably you might be confused . No problem , let's look at how we will create the triangle step-by-step.

First let's begin with the basic HTML markup

HTML Code :

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

CSS Code :

.triangle{
            width: 0px;
            height:0px;

            /*Element's borders*/
            border-top: transparent 50px solid;
            border-bottom: transparent 50px solid;
            border-left: blue 50px solid;
            border-right: transparent 50px solid ;
        }

SO what's happening here ?

Firstly we created an element with 0% width and height , because here we will be using the element's borders , not the element itself.

Now to the borders. The Border in CSS is a shorthand property for setting the top , bottom , left and right borders at once. So we can always breakdown shorthand properties CSS , and for the border property we can break it down to give us these four properties :

1) border-right

2) border-left

3) border-top

4) border-bottom

So now we will be able to individually style the four borders .

Now the next step is to set the value of all borders to solid which will give us line borders. Then we define the width of each border , like 10px , 1% , etc.

Now the fun part ! We will set only three of the properties and add the value transparent. Basically it is the equivalent of rgba(0,0,0,0) which will technically give us a black color with no opacity.

With that three of the borders will disappear and border that didn't disappear will be your triangle ! 🎉

Tip

You can experiment making different triangles by making other borders transparent while leaving one border with a solid color .

Common mistakes made while making a triangle :

1. Don't set the value of any of the four border's properties to none as that will make it disappear and the other borders connected to that border will lose their angle like shape and become straight.

2. Don't use the width or height properties of the element to increase the triangle's height . Instead , use the width of the border to increase the triangle's size.

3. Transparent is technically a color value , hence don't enter the solid color value and the transparent value together as that would break the triangle.

As always you can play with these triangles in the following Codepen:

I hope you enjoyed this tutorial and I'll see you in Part 3 ! 👋