css 实现小三角_html/css_WEB-ITnose

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 ;

}

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 ;

}

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 ;

}

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 ;

}

1

2

3

4

5

6

#triangle-topleft {

     width : 0 ;

     height : 0 ;

     border-top : 100px solid red ;

     border-right : 100px solid transparent ;

}

1

2

3

4

5

6

7

#triangle-topright {

     width : 0 ;

     height : 0 ;

     border-top : 100px solid red ;

     border-left : 100px solid transparent ;

}

1

2

3

4

5

6

#triangle-bottomleft {

     width : 0 ;

     height : 0 ;

     border-bottom : 100px solid red ;

     border-right : 100px solid transparent ;

}

1

2

3

4

5

6

#triangle-bottomright {

     width : 0 ;

     height : 0 ;

     border-bottom : 100px solid red ;

     border-left : 100px solid transparent ;

}