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

发布时间：2023-01-17 01:15:12 来源：互联网

.

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

参考了天猫、微博等网站的做法，用纯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;}
/*css三角形*/
.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;}
/*css圆形*/
.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>