首页 > 代码库 > CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
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 ; } |
CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。