CSS实现山顶角的补充

无意间在QZone发现了一种以其他方式实现的山顶角，如图：

右边的这个就是HTML结构，可以看到是由9个b标签构成利用它们的边框并且用宽度或者margin将其撑开即可实现，例如：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Border</title>
  6. <style type="text/css">
  7. *
  8. {
  9.     margin:0;
  10.     padding:0;
  11. }
  12. body
  13. {
  14.     padding:100px;
  15. }
  16. div
  17. {
  18.     width:5px;
  19. }
  20. .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8,.b9
  21. {
  22.     border-left:solid #666 1px;
  23.     height:1px;
  24.     overflow:hidden;
  25.     display:block;
  26.     clear:both;
  27.     float:right;
  28. }
  29. .b1,.b9
  30. {
  31.     width:1px;
  32. }
  33. .b2,.b8
  34. {
  35.     width:2px;
  36. }
  37. .b3,.b7
  38. {
  39.     width:3px;
  40. }
  41. .b4,.b6
  42. {
  43.     width:4px;
  44. }
  45. .b5
  46. {
  47.     width:5px;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52.     <div>
  53.         <b class="b1"></b>
  54.         <b class="b2"></b>
  55.         <b class="b3"></b>
  56.         <b class="b4"></b>
  57.         <b class="b5"></b>
  58.         <b class="b6"></b>
  59.         <b class="b7"></b>
  60.         <b class="b8"></b>
  61.         <b class="b9"></b>
  62.     </div>
  63. </body>
  64. </html>

 当然用margin也是一样的，例如这样修改：

  1. .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8,.b9
  2. {
  3.     border-left:solid #666 1px;
  4.     height:1px;
  5.     overflow:hidden;
  6.     display:block;
  7.     width:1px;
  8. }
  9. .b1,.b9
  10. {
  11.     margin-left:4px;
  12. }
  13. .b2,.b8
  14. {
  15.     margin-left:3px;
  16. }
  17. .b3,.b7
  18. {
  19.     margin-left:2px;
  20. }
  21. .b4,.b6
  22. {
  23.     margin-left:1px;
  24. }

 就不多说了，相信大家也都看得懂，DOME在这里。

posted on 2011-09-14 09:43  I am fine !  阅读(284)  评论(0)  编辑  收藏  举报