CSS布局001：画各种三角形

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