一波CSS制作的三角形和圆形小按钮示例

互联网
一弯拱桥对映着一弯晓月，桥下流水波光粼粼，昙花一般的月，在我眼中异香腾风，秀色媚景。夜的静谧是风景，昼的明媚是风景。江花胜火红，寒山伤心碧，空伫玉阶白，西风残照黄。处处皆风景，处处皆绝妙风景。

参考了天猫、微博等网站的做法，用纯html和css实现，效果还是不错的。
以下是成果，兼容主流浏览器，包括ie6。

CSS Code复制内容到剪贴板
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  6. <metahttp-equiv="Content-Language"content="zh-CN"/>
  7. <metaname="Keywords"content=""/>
  8. <metaname="Description"content=""/>
  9. <title></title>
  10. </head>
  11. <styletype="text/css">
  12. *{margin:0;padding:0;list-style:none;font:normal12px/150%宋体;}
  13. body{padding:20px;}
  14. .arrow{margin-bottom:20px;}
  16. /*css三角形*/
  17. .arrow,.arrows{position:relative;display:block;font-size:0;line-height:0;width:0;height:0;border-color:transparent;border-style:dashed;border-width:5px;}
  18. .arrowR,.arrowRs{border-left-color:#aaa;border-left-style:solid;}
  19. .arrowRs{border-left-color:#fff;position:absolute;left:-7px;top:-5px;}
  20. .arrowR:hover{border-left-color:#f60;}
  22. .arrowL,.arrowLs{border-right-color:#aaa;border-right-style:solid;}
  23. .arrowLs{border-right-color:#fff;position:absolute;rightright:-7px;top:-5px;}
  24. .arrowL:hover{border-right-color:#f60;}
  26. .arrowT,.arrowTs{border-bottom-color:#aaa;border-bottom-style:solid;}
  27. .arrowTs{border-bottom-color:#fff;position:absolute;left:-5px;top:-3px;}
  28. .arrowT:hover{border-bottom-color:#f60;}
  30. .arrowB,.arrowBs{border-top-color:#aaa;border-top-style:solid;}
  31. .arrowBs{border-top-color:#fff;position:absolute;left:-5px;bottombottom:-3px;}
  32. .arrowB:hover{border-top-color:#f60;}
  34. /*css圆形*/
  35. .circle{line-height:100%;overflow:hidden;font-family:Tahoma,Helvetica;font-size:18px;color:#aaa;}
  36. .circle:hover{color:#f60;}
  39. /*提示盒子*/
  40. .tipBox{width:200px;margin-top:10px;}
  41. .tipBox.hd{height:5px;position:relative;}
  42. .tipBox.hd.arrow{position:absolute;top:-5px;left:10px;}
  43. .tipBox.hd.arrows{top:-4px;}
  44. .tipBox.bd{border:1pxsolid#aaa;padding:10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
  45. .tipBoxA.arrows{border-bottom-color:#f6f6f6;}
  46. .tipBoxA.bd{background:#f6f6f6;}
  47. </style>
  48. <body>
  49. <aclass="arrowarrowR"></a>
  50. <aclass="arrowarrowL"></a>
  51. <aclass="arrowarrowT"></a>
  52. <aclass="arrowarrowB"></a>
  54. <aclass="arrowarrowR"><s></s></a>
  55. <aclass="arrowarrowL"><s></s></a>
  56. <aclass="arrowarrowT"><s></s></a>
  57. <aclass="arrowarrowB"><s></s></a>
  59. <aclass="circle">?</a>
  61. <divclass="tipBox">
  62. <divclass="hd">
  63. <sclass="arrowarrowT"><s></s></s>
  64. </div>
  65. <divclass="bd">
  66. 用css做的提示盒子，上三角是纯css，盒子圆角用到css3
  67. </div>
  68. </div>
  69. <divclass="tipBoxtipBoxA">
  70. <divclass="hd">
  71. <sclass="arrowarrowT"><s></s></s>
  72. </div>
  73. <divclass="bd">
  74. 用css做的提示盒子，上三角是纯css，盒子圆角用到css3
  75. </div>
  76. </div>
  77. </body>
  79. </html>

到此这篇关于一波CSS制作的三角形和圆形小按钮示例就介绍到这了。苦海有涯。而学无涯，志者战高考，惰者畏高考。更多相关一波CSS制作的三角形和圆形小按钮示例内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
一波CSS高级实用技巧小结
一波CSS的Checkbox复选框样式代码分享
一波CSS+Div实用技巧小结
CSS3实战第一波 让我们尽情的圆角吧
css让页脚保持在底部位置的四种方案