css 实现小三角_html/css_WEB-ITnose-HTML Tutorial-php.cn

css 实现小三角_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:35:54

Original

1027 people have browsed it

Triangle Up

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

Triangle Down

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

Triangle Left

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

Triangle Right

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

Triangle Top Left

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

Triangle Top Right

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

Triangle Bottom Left

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

Triangle Bottom Right

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