回到顶部
我的头像

RedSpite

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

2016.07.25

© RedSpite | 蜀ICP备16004270号