实现效果

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQcAAABKCAIAAAA5eAb2AAAE5ElEQVR4nO2dP27bSBTGWbhLEQRwDhGfRQALXyQ3CBEj4MJNms0RYsIlu+2UgMV2UyRbqAu2IQ+gA8wWJCXycTimxMfwz/5++JoohmY0/j6+eUPaDiwAtAnmngDA4iAVABJSASAhFQASUgEgIRUAElIBIJkqFf9m2dNu93h7GwUBQlfo8fb2abf7td9PZFEPk6Ti78+fP97czL6saAP6eHPz/eFhCpd60E/FP8/Pj2/fzr6aaDOKX7/+mSTqRvWgn4rn+/vZ1xFtTM/39+pG9aCfii93d7MvItqYvtzdqRvVg34qZl9BtEmpG9UDqUDrkLpRPZAKtA6pG9UDqUDrkLpRPZAKtA6pG9UDqUDrkLpRPSgP9tf797MvH9qkdI3qR3Owb1E0+9qdlJn8EHZej421Jpt7bugKKRr1RdQGW1QkoiBI0tyauPN6eMhtEc8/vWqG1hXdxlSPaTjtBPI0mXsdBkrLqEPQGWxpkYiCIAriwum52LjSUv+XF804hemxfNO+ybRTkaT5C1N6afLdj9BIRXhwv721dtpkDteQT6eFwmCLjETjuz7c6779lW6RiQtb5iEuesPWSYXMz9gpiVQspIT2abxRhzN2sMVGIgqCKIiLi7qI31QrwkNuz1uX2HT3UVl7Isc0fLlWXCLx/takpKLJqMGWHYkBzhBX399RK+LCWrmbdwVjlloh02Ltcg4nxhj1Uq4fbMmROH13K9M47O7aukxdK8peojZ3ZkTFEO8/vK/wdQUOmr2Eewfl2dfNpks+4ViuHGzJkWi66vStLV11+mfLkScNrRXXuFBMwDWHU7NxHqXcOxXxVbUiTI+eM65Tu29NRira/F9SEQXV9fiYhj07lgnlDKHzxSTN62RW2bvsCKh5wtZIRZLm4n2SND/muc3Tgzn3FY6KtJij21E2v5Bt7qCi2lXygldfILsWGf7BtU4q3fWqMfl6rLjwT+hcQ9rX+GYqYtOuG3FhzaHqK+IiNwW1osGGu21XKs6dg3un1NqoxGbSK6UnFZnJD2HfXbye+zDd84P2DqpRharS0X8ySyrGseBgyFSULfgxDesrcddbbTe4mm/FW1reWhH0n0H1350UUZd9RXjIq9hkxmSOMyh3UVpIPEYa9SI2fBfvnIp6g9SxiHU0HkuoFacZ1qloJlx4t0yC6+re7bbD9GjbJxDcxXOx2Sc+qsNZE7sOPRtfIzfljTKynFRUVau0uKNWuB/6ch0qNL+SVPSxzacDM2Otrbbmw5wdF83dkf/GRe+TS5dPclAq6jpQnaGlfX1FqdbJgXeqA5+D0vq8I6Vj02Fs80nyJDUn37ju17YxcWZmeAbO222XM+v23C77Xutanpntg586QuuQrlH98BOqaB1SN6oHUoHWIXWjeiAVaB1SN6oHUoHWIXWjeiAVaB1SN6oHUoHWIXWjetAf7M9372ZfQbQxrf439T/tdrMvItqYnnY7daN60E/FzyT5482b2dcRbUafXr368fWrulE9TLJd+/7wMPtSos1o/+HDFC71MFUT82u/5y8LozHa2l8WBlg1pAJAQioAJKQCQEIqACSkAkBCKgAkpAJAQioAJKQCQEIqACSkAkBCKgAkpAJAQioAJKQCQEIqACSkAkBCKgAkpAJAQioAJKQCQEIqACSkAkBCKgAkpAJA8h8gu8pjqBQaEAAAAABJRU5ErkJggg==" alt="" />

实现代码

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <link rel="shortcut icon" href="resources/img/logo-color.png" type="image/x-icon">

    <title>测试</title>

    <style>

    .out-div {

        color: #FFFFFF;

        font-size: 16px;

        line-height: 40px;

        display: inline-block;

        height: 40px;

        width: 200px;

        text-align: center;

        border-radius: 5px;

        margin-left: 32px;

        vertical-align: top;

        background-color: maroon;

    }

    .arrow {

        width: 0px;

        height: 0px;

        border-top: 10px solid transparent;

        border-right: 10px solid;

        border-bottom: 10px solid transparent;

        position: absolute;

        margin-left: -10px;

        margin-top: 10px;

        border-right-color: maroon;

    }

    </style>

  </head>

  <body>

    <div class="out-div">

        <div class="arrow" ></div>

        <span>这是一个提示框</span>

    </div>

  </body>

</html>

DIV+CSS实现左侧带三角形的提示框的更多相关文章

  1. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  2. 圆角带箭头的提示框css实现

    css是一个很强大的东西,很多网页效果,我们可以通过css直接实现.今天给大家分享的是一个用css实现的圆角带箭头的提示框. 效果如下图: 这一个样式主要涉及到了css的边框样式border的运用和定 ...

  3. CSS实现带箭头的提示框

    我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...

  4. css画一个提示框

    用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. CSS写的提示框（兼容火狐IE等各大浏览器）

    项目上使用jQuery的Tooltip组件,在谷歌上正常,在火狐和IE下没有效果,所以根据谷歌的提示框单独用CSS写了个提示框,比较好的兼容了火狐和IE,且效果一样 原Tooltip代码: $('#d ...

  6. jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]

    jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...

  7. easyui 消息提示框

    1.浏览器消息提示框 浏览器弹出框,可以在浏览器设置中被屏蔽掉,导致效果失效 alert() 2.easyui 框架提供的消息框 easyui 框架自带的消息框,不可以被屏蔽. $.messager. ...

  8. div+css实现圆形div以及带箭头提示框效果

    .img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...

  9. 转~~~ DIV+CSS实现三角形提示框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel= ...

随机推荐

  1. js或css文件合并的三种方式推荐

    源文档 <http://www.jb51.net/article/32834.htm> 在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一 ...

  2. 电脑Windows使用中遇到的那些问题

    Win64位注册表导入方法 64位Windows操作系统注册表不同于32位Windows操作系统,Win64 位版本分为 32 位注册表项和 64 位注册表项.默认 64 位版本注册表编辑器 (Reg ...

  3. jquery内容选择器（匹配包含指定选择器的元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. font-family常见字体

    font-family:"Times New Roman",Georgia,Serif font-family:Arial,Verdana,Sans-serif font-fami ...

  5. django pdb

    import pdb; pdb.set_trace()   http://charlee.li/debug-djangp-with-pdb.html https://github.com/tomchr ...

  6. 设置Xshell中支持中文

    执行echo $LANG命令输出的是当前的编码方式,执行locale命令得到系统中所有可用的编码方式.要让Xshell不显示乱码,则要将编码方式改为UTF-8. 在Xshell中[file]-> ...

  7. hibnate 创建表的时候type=innodb报错

    这个原因是在MYSQL5.5及以后版本中type=InnoDB 由ENGINE=InnoDB  代替. 解决办法,自己定义一个方言: package com.hotusm.dialect; /** * ...

  8. 泛函编程（38）－泛函Stream IO：IO Process in action

    在前面的几节讨论里我们终于得出了一个概括又通用的IO Process类型Process[F[_],O].这个类型同时可以代表数据源(Source)和数据终端(Sink).在这节讨论里我们将针对Proc ...

  9. linux下MySQL表名忽略大小写设置

    最近公司项目的MySQL数据库要迁移到linux下,部署时日志总是显示报找不到一个表,用MYSQL查看明明有这个表.后来经百度,原来LINUX下的MYSQL默认是区分表名大小写的. 用命令查看当前是否 ...

  10. 通过rsync+inotify实现数据实时备份同步

    一.环境描述 测试环境 需求:服务器A与服务器B为主备服务模式,需要保持文件一致性,现采用sersync基于rsync+inotify实现数据实时同步 环境描述: 主服务器172.26.7.50 ,从 ...