首页 > web前端 > html教程 > css 实现小三角_html/css_WEB-ITnose

css 实现小三角_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:35:54
原创
1028 人浏览过

Triangle Up

 

 

1

2

3

4

5

6

7

#triangle-up {

     width : 0 ;

     height : 0 ;

     border-left : 50px solid transparent ;

     border-right : 50px solid transparent ;

     border-bottom : 100px solid red ;

}

   

Triangle Down

 

 

1

2

3

4

5

6

7

#triangle-down {

     width : 0 ;

     height : 0 ;

     border-left : 50px solid transparent ;

     border-right : 50px solid transparent ;

     border-top : 100px solid red ;

}

   

Triangle Left

 

 

1

2

3

4

5

6

7

#triangle- left {

     width : 0 ;

     height : 0 ;

     border-top : 50px solid transparent ;

     border-right : 100px solid red ;

     border-bottom : 50px solid transparent ;

}

  

Triangle Right

 

 

1

2

3

4

5

6

7

#triangle- right {

     width : 0 ;

     height : 0 ;

     border-top : 50px solid transparent ;

     border-left : 100px solid red ;

     border-bottom : 50px solid transparent ;

}

  

Triangle Top Left

 

 

1

2

3

4

5

6

#triangle-topleft {

     width : 0 ;

     height : 0 ;

     border-top : 100px solid red ;

     border-right : 100px solid transparent ;

}

  

Triangle Top Right

 

 

1

2

3

4

5

6

7

#triangle-topright {

     width : 0 ;

     height : 0 ;

     border-top : 100px solid red ;

     border-left : 100px solid transparent ;

 

}

  

Triangle Bottom Left

 

 

1

2

3

4

5

6

#triangle-bottomleft {

     width : 0 ;

     height : 0 ;

     border-bottom : 100px solid red ;

     border-right : 100px solid transparent ;

}

  

Triangle Bottom Right

 

 

1

2

3

4

5

6

#triangle-bottomright {

     width : 0 ;

     height : 0 ;

     border-bottom : 100px solid red ;

     border-left : 100px solid transparent ;

}


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板