div+css样式自制带小三角的tooltips效果

代码和效果图如下：

<!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>        <!--先定义一个相对定位的盒子div：-->        <div class="tooltips">            <!--给div盒子添加一个三角型图标-->            <div class="arrow "></div>            <!--给“小三角穿上松紧带”需要使用两个三角形叠加的方式-->            <!--首先我们定义两个三角形的div，一个背景色和盒子的边框颜色相同，一个背景色和盒子的背景色一致：-->            <div class="arrow arrow-border"></div>            <div class="arrow arrow-bg"></div>            <!--注意：.arrow-bg和.arrow-border的bottom位置相差为1px（可根据边框宽度调整）两个div的顺序不可颠倒。-->        </div>    </body></html>

效果展示图

以上所述是小编给大家介绍的 div+css样式自制带小三角的tooltips效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

div+css样式自制带小三角的tooltips效果