css border制作小三角形状及应用（兼容IE6）

http://caibaojian.com/css-border-triangle.html

 

http://www.bitscn.com/school/HTMLCSS/201410/337133.html

1. .text{
2. height:0;
3. width:0;
4. /* 这里设置overflow, font-size, line-height,是因为,
5. * 虽然宽高度为0, 但在IE6下会具有默认的字体大小和行高,
6. * 导致盒子呈现被撑开的长矩形*/
7. overflow: hidden;
8. font-size:0;
9. line-height:0;
10. border-color:#FF9600 transparent transparent transparent;/*IE6不支持transparent属性*/
11. border-style: solid dashed dashed dashed;//IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果~,但在火狐下会出现只有半边三角形效果
12. border-width:20px;
13. }

最终效果：

1. .switchCity .chose {
2. float: left;
3. width:100%;
4. padding:24px0024px;
5. position: relative;
6. }
7. .switchCity .chose p {
8. float: left;
9. padding:10px;
10. background:#8FAB72;
11. border-radius:1px;
12. }
13. .switchCity .chose span {
14. position: absolute;
15. left:0;
16. top:0;
17. height:0;
18. width:0;
19. overflow: hidden;
20. font-size:0;
21. line-height:0;
22. border-color:#8FAB72 transparent transparent transparent;
23. border-style:solid!important;/单独解决IE7和火狐Bug/
24. border-style:solid dashed dashed dashed;
25. border-width:11px11px0;
26. }

 

来自为知笔记(Wiz)