“ TUTORIAL #1 playing with triangles : the basics to making a triangle and weird shapes!       Triangles, triangles, triangles. They make a layout look so nice, but they can also be quite confusing. When I first started coded here at aff, I was amazed to see triangles on some of the layouts coded by the coder senapais here. When I tried to find a good tutorial on how to make them, I couldn't find anything, so I would basically learn by reading the codes of the other layouts and trying how to figure how to do it myself. But good thing I'm here to help you, lol! It took me so long how to figure it out, so let's quickly begin!   Let's look at the code for a triangle that looks like this :       <div style="width:0px;height:0px;border-bottom:100px solid #a0bbe8;border-right:100px solid transparent;">   </div>     Let's anaylze it!  

1. width : 0px; height: 0px

With triangles, it's all about the borders. Therefore, the height and width are set to zero. You still need to include this in the code though! Without your height and width set to zero, the div will take the shape of the page and cannot be controlled by you. And with coding, you need to be able to know what everything is doing.

 

2. border-bottom: 100px solid #a0bbe8

This part is essentially the foundation of the triangle. "100px" gives it its width, solid means you're wanting your triangle to be solid, and "#a0bbe8" is the hex color code of your triangle. To get the hex code of another color, just search 'hex color' in google and it brings up a box that lets you find the hex color code of the color you want.

 

3.border-right:100p