css 实现小三角_html/css_WEB-ITnose-html教程-PHP中文网

css 实现小三角_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:35:54

原创

1183人浏览过

Triangle Up

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

176

查看详情

立即学习“前端免费学习笔记（深入）”；

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