纯CSS绘制三角形（各种角度）

前阵子做的设计图里面有用到三角形，以前自学的时候漏掉了，暂且放这儿看看吧~

通过改变border宽度 可以得到各种不同形状的三角形

• triangleUp
• triangleDown
• triangleLeft
• triangleRight
• triangleTopLeft
• triangleTopRight
• triangleBottomLeft
• triangleBottomRight

•                            #text.up{
                                  width: 0;
                                  height: 0;
                                  border-left: 50px solid transparent;
                                  border-right: 50px solid transparent;
                                  border-bottom: 100px solid #ddd;
                             }
                         

•                            #text.down{
                                  width: 0;
                                  height: 0;
                                  border-left: 50px solid transparent;
                                  border-right: 50px solid transparent;
                                  border-top: 100px solid #ddd;
                             }
                          

•                            #text.left{
                                  width: 0;
                                  height: 0;
                                  border-bottom: 50px solid transparent;
                                  border-top: 50px solid transparent;
                                  border-right: 100px solid #ddd;
                             }
                         

•                            #text.right{
                                  width: 0;
                                  height: 0;
                                  border-bottom: 50px solid transparent;
                                  border-top: 50px solid transparent;
                                  border-left: 100px solid #ddd;
                             }
                         

•                            #text.topleft {
                                  width: 0;
                                  height: 0;
                                  border-top: 100px solid #ddd;
                                  border-right: 100px solid transparent;
                             }
                         

•                            #text.topright {
                                  width: 0;
                                  height: 0;
                                  border-top: 100px solid #ddd;
                                  border-left: 100px solid transparent;
                             }
                          

•                           #text.bottomleft {
                              width: 0;
                              height: 0;
                              border-bottom: 100px solid #ddd;
                              border-right: 100px solid transparent;
                            }
                         

•                            #text.bottomright {
                                  width: 0;
                                  height: 0;
                                  border-bottom: 100px solid #ddd;
                                  border-left: 100px solid transparent;
                             }