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

前端  /  管理员 发布于 7年前   194

 代码和效果图如下：

<!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效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！


  • 上一条：
    css 实现矩形四个边角加粗的方法
    下一条：
    CSS3的颜色渐变效果的示例代码

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客