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

互联网   10-11 11:32:42   作者:佚名   我要评论

这篇文章主要介绍了 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效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • CSS 动画实现动态气泡背景的方法

    这篇文章主要介绍了CSS 动画实现动态气泡背景的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-24
  • css中引入svg来兼容部分安卓机显示0.5px边框的示例

    这篇文章主要介绍了css中引入svg来兼容部分安卓机显示0.5px边框的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-22
  • CSS理解块级格式上下文(BFC)

    BFC(Block formatting context)直译为"块级格式化上下文"。它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干.接下来通过本文给大家介绍CSS理
    2018-02-22
  • ES6与canvas实现鼠标小球跟随效果

    这篇文章主要介绍了ES6与canvas实现鼠标小球跟随效果的相关资料,需要的朋友可以参考下
    2018-02-11
  • CSS水平垂直居中解决方案(6种)

    这篇文章主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-10
  • css实现右侧固定宽度 左侧宽度自适应

    这篇文章主要介绍了css实现右侧固定宽度 左侧宽度自适应,这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域
    2018-02-09
  • 使用css与js生成的唯美炫酷的图形树效果

    这篇文章给大家分享一个使用css与js生成的唯美炫酷的图形树效果,具体实例代码大家参考下本文
    2018-02-09
  • CSS实现优惠券边沿打孔效果

    本文给大家分享使用纯css写的一个边沿打孔效果,需要的朋友参考下
    2018-02-08
  • css Flex布局的可伸缩性(Flexibility)

    这篇文章主要介绍了css Flex布局的可伸缩性(Flexibility)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-07
  • CSS :befor :after 伪元素的巧妙用法

    本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景,如填充文本、作为iconfont、进度线、时间线以及几何图形,感兴趣的朋友一起看看吧
    2018-02-07

最新评论