At first it may seem like making triangles with CSS might be hard...
For me it kinda was. but when you understand how to do it right you'll see it wasn't hard at all
So let's begin :
If we do this :
You see how each border has a sharp point?
And now we set the height and width to zero :
border-bottom: solid 25px red;
border-right: solid 25px green;
border-left: solid 25px blue;
border-top: solid 25px yellow;
with setting the height and width to zero we removed the space between borders and the sharp points got sharper ,then all came close together and now we have 4 triangles.
You may ask "okay how do I make just one triangle? I don't need four of them"!
It's easy. we'll make a triangle that its sharp point faces up :
border-bottom: rgb(255, 139, 251) solid 200px;
border-left: transparent solid 200px;
border-right: transparent solid 200px;
So what happened here?
Since I wanted the sharp point to be at the top I had to give it border-bottom and then border-left and border-right.
As you can see we have 3 triangles here, in order to make it just one we have to make the left and right triangles invisible.
And the trick is we have to set them to transparent.
If you want the sharp point to face down you need to give it border-top and set the border-left and border-right to transparent:
border-top: 100px solid rgb(0, 162, 255);
border-left: 100px solid transparent;
border-right: 100px solid transparent;
I've prepared a CSS file and live preview. you can check it out HERE
You can also check out this cool animation on codepen