How to create a triangle in CSS

How to create a triangle in CSS

Let learn ways to create a triangle in CSS step by step, and give you an example where we can use that triangle on a real project.

last time we create a triangle with  pseudo elements in CSS

Learn ::before and ::after pseudo elements in css

 on this topic we will create a triangle in CSS in a different way:

<div></div>

div {
   width: 60px;
   border-width: 30px;
   border-color: green blue yellow red;
   border-style: solid;
}

 - we create an <div> on HTML and make some CSS style, it just different color for each border of that div we created with the width

In this picture you see two triangles red and blue, you can choose what you want

and other triangle and shape we will give them transparent color to hide those shapes and keep what we want.

- let keep the red one and hide other

the result will be:

 

 and that is it.

you can check the code here: codepen

where we use the triangle:

Their many places you will need to make a triangle and it easy to just try by your self in different ways.

 and you can create other shapes if you want just by HTML and CSS.