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 ;

}