欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css 实现小三角_html/css_WEB-ITnose

程序员文章站 2022-05-22 13:25:11
...

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 ;

}

相关标签: css 实现小三角