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实现小三角_html/css_WEB-ITnose的详细内容...