CSS实战中，有很多时候采用css来绘制三角形，而不是采用图片的方式，这样有利于快速成型，不用多调用服务器数据。

CSS代码

上三角

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

下三角

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

左三角

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

右三角

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

左上三角

 #triangle-up {width: 0;height: 0;border-right: 100px solid transparent;border-top: 100px solid red;}

左下三角

 #triangle-up {width: 0;height: 0;border-right: 100px solid transparent;border-bottom: 100px solid red;}

右上三角

 #triangle-up {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}

右下三角

 #triangle-up {width: 0;height: 0;border-left: 100px solid transparent;border-bottom: 100px solid red;}