How to create Triangle using css code

Use This Code to Create Triangle


Up Triangle
#up-triangle {
   width: 0;
   height: 0;
   border-bottom: 120px solid blue;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}

Down Triangle
#down-triangle {
   width: 0;
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}

Left Triangle
#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

Right Triangle
#right-triangle {
   width: 0;
   height: 0;
   border-left: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}


Triangle Top Left
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid blue;
border-right: 100px solid transparent;
}

Comments