实现效果

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. Unicode中文和特殊字符的编码范围

    编程中有时候需要用到匹配中文的正则,一般用 [ \u4e00-\u9fa5]+ 即可搞定.不过这正则对一般的火星文鸟语就不太适用了,甚至全角的标点符号都不包含在内.例如游戏里面的玩家名,普通青年一般都 ...

  2. ASP.NET Core 发布至Linux生产环境 Ubuntu 系统

    ASP.NET Core 发布至Linux生产环境 Ubuntu 系统,之前跟大家讲解了 dotnet publish 发布,而没有将整个系统串起来. 今天就跟大家综合的讲一下ASP.NET Core ...

  3. 数据库SQL server规则的创建、查看、修改和规则的绑定与松绑、删除

    用CREATE RULE语句创建规则 创建雇佣日期规则 hire_date_rule CREATE RULE hire_date_rule AS @hire_date>='1980-01-01' ...

  4. 阿里前端框架Alice是个不错的选择

    BootStrap虽然用户群体广大,其整体风格尽管有不少skin可选,但以国情来看还是不好看. 阿里开源的前端框架,个人觉得还是很不错,Alice处处透着支付宝中界面风格的气息,电商感挺强. 以下内容 ...

  5. Java集合源码分析（一）

    Java集合工具包位于Java.util包下,包含了很多常用的数据结构,如数组.链表.栈.队列.集合.哈希表等.学习Java集合框架下大致可以分为如下五个部分:List列表.Set集合.Map映射.迭 ...

  6. 最短的数字判断代码 js

    转自  http://www.cnblogs.com/snandy/p/3590186.html 我们知道JavaScript提供了typeof运算符,因此最容易想到的是用typeof来判断是否是nu ...

  7. windows / linux系统中，端口被占用解决方法

    一.在windows操作系统中,查询端口占用和清除端口占用的程序 提升权限后用:netstat -b或用 1.查询端口占用的进程ID 点击"开始"-->"运行&qu ...

  8. javaweb学习总结(十一)——使用Cookie进行会话管理

    一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...

  9. 线程（三）__Interrupt 、setDaemon()、join

    一.wait和sleep区别? 1.wait可以指定也可以不指定.sleep必须指定时间. 2.在同步中时,对cpu的执行权和锁的处理不同.它们都能将线程处于冻结状态. wait:释放执行权,释放锁. ...

  10. 正确的前端传后台json方式

    DEMO: var data=JSON.stringify({"page": {"pagenow": 1,"pagesize": 20},& ...