CSS Triangle

Here are the simple example of css triangles:

Note: Before writing CSS, first create div tag with class 'triangle'.

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

Triangle Up:

.triangle{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}

Output:

Triangle Down:

.triangle{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid red;
}

Output:

Triangle Left:

.triangle{
  width: 0px;
  height: 0px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 50px solid red;
}

Output:

Triangle Right:

.triangle{
  width: 0px;
  height: 0px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid red;
}

Output:

Top Left Triangle:

.triangle{
  width: 0px;
  height: 0px;
  border-right: 50px solid transparent;
  border-top: 50px solid red;
}

Output:

Top Right Triangle:

.triangle{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-top: 50px solid red;
}

Output:

Bottom Left Triangle:

.triangle{
  width: 0px;
  height: 0px;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}

Output:

Bottom Right Triangle:

.triangle{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-bottom: 50px solid red;
}

Output:

Finally combine four triangles:

.triangle{
  width: 0px;
  height: 0px;
  border-top: 100px solid #0099ff;
  border-left: 100px solid #ff9900;
  border-right: 100px solid #F6402D;
  border-bottom: 100px solid #8CC63E;
}

Output: