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

时间:2021-05-08

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

CSS Code复制内容到剪贴板
  • <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <htmlxmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  • <metahttp-equiv="Content-Language"content="zh-CN"/>
  • <metaname="Keywords"content=""/>
  • <metaname="Description"content=""/>
  • <title></title>
  • </head>
  • <styletype="text/css">
  • *{margin:0;padding:0;list-style:none;font:normal12px/150%宋体;}
  • body{padding:20px;}
  • .arrow{margin-bottom:20px;}
  • .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;}
  • .arrowR,.arrowRs{border-left-color:#aaa;border-left-style:solid;}
  • .arrowRs{border-left-color:#fff;position:absolute;left:-7px;top:-5px;}
  • .arrowR:hover{border-left-color:#f60;}
  • .arrowL,.arrowLs{border-right-color:#aaa;border-right-style:solid;}
  • .arrowLs{border-right-color:#fff;position:absolute;rightright:-7px;top:-5px;}
  • .arrowL:hover{border-right-color:#f60;}
  • .arrowT,.arrowTs{border-bottom-color:#aaa;border-bottom-style:solid;}
  • .arrowTs{border-bottom-color:#fff;position:absolute;left:-5px;top:-3px;}
  • .arrowT:hover{border-bottom-color:#f60;}
  • .arrowB,.arrowBs{border-top-color:#aaa;border-top-style:solid;}
  • .arrowBs{border-top-color:#fff;position:absolute;left:-5px;bottombottom:-3px;}
  • .arrowB:hover{border-top-color:#f60;}
  • .circle{line-height:100%;overflow:hidden;font-family:Tahoma,Helvetica;font-size:18px;color:#aaa;}
  • .circle:hover{color:#f60;}
  • .tipBox{width:200px;margin-top:10px;}
  • .tipBox.hd{height:5px;position:relative;}
  • .tipBox.hd.arrow{position:absolute;top:-5px;left:10px;}
  • .tipBox.hd.arrows{top:-4px;}
  • .tipBox.bd{border:1pxsolid#aaa;padding:10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
  • .tipBoxA.arrows{border-bottom-color:#f6f6f6;}
  • .tipBoxA.bd{background:#f6f6f6;}
  • </style>
  • <body>
  • <aclass="arrowarrowR"></a>
  • <aclass="arrowarrowL"></a>
  • <aclass="arrowarrowT"></a>
  • <aclass="arrowarrowB"></a>
  • <aclass="arrowarrowR"><s></s></a>
  • <aclass="arrowarrowL"><s></s></a>
  • <aclass="arrowarrowT"><s></s></a>
  • <aclass="arrowarrowB"><s></s></a>
  • <aclass="circle">?</a>
  • <divclass="tipBox">
  • <divclass="hd">
  • <sclass="arrowarrowT"><s></s></s>
  • </div>
  • <divclass="bd">
  • 用css做的提示盒子,上三角是纯css,盒子圆角用到css3
  • </div>
  • </div>
  • <divclass="tipBoxtipBoxA">
  • <divclass="hd">
  • <sclass="arrowarrowT"><s></s></s>
  • </div>
  • <divclass="bd">
  • 用css做的提示盒子,上三角是纯css,盒子圆角用到css3
  • </div>
  • </div>
  • </body>
  • </html>
  • 声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章