Implement triangles in various directions via CSS

#triangle-Up {width:0; Height:0; Border-left:50px solid Transparent; Border-right:50px solid Transparent; Border-bottom:100px solid Red;} #triangle-Down {width:0; Height:0; Border-left:50px solid Transparent; Border-right:50px solid Transparent; Border-top:100px solid Red;} #triangle-Left {width:0; Height:0; Border-top:50px solid Transparent; Border-right:100px solid red; Border-bottom:50px solid Transparent;} #triangle-Right {width:0; Height:0; Border-top:50px solid Transparent; Border-left:100px solid red; Border-bottom:50px solid Transparent;} #triangle-topleft {width:0; Height:0; Border-top:100px solid red; Border-right:100px solid Transparent;} #triangle-topright {width:0; Height:0; Border-top:100px solid red; Border-left:100px solid Transparent;} #triangle-bottomleft {width:0; Height:0; Border-bottom:100px solid red; Border-right:100px solid Transparent;} #triangle-bottomright {width:0; Height:0; Border-bottom:100px solid red; Border-left:100px solid Transparent;}

Implement triangles in various directions via CSS