CSS Triangle Drawing Method

#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;
}

"Original link" http://www.jb51.net/article/42513.htm

CSS Triangle Drawing Method