CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
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 ; } |
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。