css 实现小三角_html/css_WEB-ITnose
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 ; } |