代碼和效果圖如下：
| <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .tooltips { position: relative; width: 300px; height: 80px; line-height: 60px; background: #D7E7FC; border-radius: 4px; } .arrow { position: absolute; color: #D7E7FC; width: 0px; height: 0px; line-height: 0px; border-width: 20px 15px 0; border-style: solid dashed dashed dashed; border-left-color: transparent; border-right-color: transparent; bottom: -20px; right: 50%; } .tooltips { position: relative; width: 300px; height: 80px; line-height: 60px; background: #D7E7FC; border: 1px solid #A5C4EC; border-radius: 4px; } .arrow { position: absolute; width: 0px; height: 0px; line-height: 0px; border-width: 20px 15px 0; border-style: solid dashed dashed dashed; border-left-color: transparent; border-right-color: transparent; } .arrow-border { color: #A5C4EC; bottom: -20px; right: 50%; } .arrow-bg { color: #D7E7FC; bottom: -19px; right: 50%; } </style> </head> <body> <!--先定義一個(gè)相對(duì)定位的盒子div：--> <div class="tooltips"> <!--給div盒子添加一個(gè)三角型圖標(biāo)--> <div class="arrow "></div> <!--給“小三角穿上松緊帶”需要使用兩個(gè)三角形疊加的方式--> <!--首先我們定義兩個(gè)三角形的div，一個(gè)背景色和盒子的邊框顏色相同，一個(gè)背景色和盒子的背景色一致：--> <div class="arrow arrow-border"></div> <div class="arrow arrow-bg"></div> <!--注意：.arrow-bg和.arrow-border的bottom位置相差為1px（可根據(jù)邊框?qū)挾日{(diào)整）兩個(gè)div的順序不可顛倒。--> </div> </body></html> |
效果展示圖
新聞熱點(diǎn)
疑難解答
圖片精選
