Making a Triangle using div

[niloy]

Making a Triangle using div

I keep forgetting the technique, so writing it down here. This technique works
with borders.

This is how a box with 20px border will look like. Each border is given a
different color.

#box {
  border-left: 20px solid red;
  border-right: 20px solid blue;
  border-top: 20px solid black;
  border-bottom: 20px solid green;
  width: 20px;
  height: 20px;
}

This is what happens when set the width and height of the box to zero.

#box {
  border-left: 20px solid red;
  border-right: 20px solid blue;
  border-top: 20px solid black;
  border-bottom: 20px solid green;
  width: 0;
  height: 0;
}

We have 4 triangles. Now, its simply a matter of making a few of them
transparent, depending on the direction and the type of triangle we want.

If we make left and right borders transparent, and remove the top border,
we are left with a equilateral triangle pointing up.

#box {
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: none;
  border-bottom: 20px solid green;
  width: 0;
  height: 0;
}

If we only make the top and right borders transparent, we have a right
angled triangle.

#box {
  border-left: 20px solid red;
  border-right: 20px solid transparent;
  border-top: 20px solid transparent;
  border-bottom: 20px solid green;
  width: 0;
  height: 0;
}

Just make both of them the same colors, okay!