当前位置:Gxlcms > html代码 > css实现小三角_html/css_WEB-ITnose

css实现小三角_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:5人阅读

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 ;

}

人气教程排行