时间戳

首页 > 技术文章 > css border制作小三角形状及应用（兼容IE6）

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

cnchenjunbiao 2015-05-15 09:36 原文

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)



推荐阅读