实现效果

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. ASP.NET Core 开发 - Entity Framework (EF) Core

    EF Core 1.0 Database First http://www.cnblogs.com/linezero/p/EFCoreDBFirst.html ASP.NET Core 开发 - En ...

  2. C#的变迁史 - C# 5.0 之并行编程总结篇

    C# 5.0 搭载于.NET 4.5和VS2012之上. 同步操作既简单又方便,我们平时都用它.但是对于某些情况,使用同步代码会严重影响程序的可响应性,通常来说就是影响程序性能.这些情况下,我们通常是 ...

  3. android app自动化测试之UIAutomator

    一.UIAutomator Android自动化测试工具有很多,但是要免费.易上手,本人觉得就直接使用Eclipse自带的UIAutomator就不错.测试人员无需跟开发要代码信息,只要手机上有安装之 ...

  4. Netbeans 8.2将支持PHP 7

    首先,将PHP项目的PHP版本设置为PHP 7.0. PHP 7其中一项新特性是返回类型声明,即PHP的函数和方法可以声明指定类型的返回值: PHP 7的另一项精彩的改进就是参数的标量类型声明,Net ...

  5. 泛函编程（29）－泛函实用结构：Trampoline-不再怕StackOverflow

    泛函编程方式其中一个特点就是普遍地使用递归算法,而且有些地方还无法避免使用递归算法.比如说flatMap就是一种推进式的递归算法,没了它就无法使用for-comprehension,那么泛函编程也就无 ...

  6. PHP内核探索之变量（3）- hash table

    在PHP中,除了zval, 另一个比较重要的数据结构非hash table莫属,例如我们最常见的数组,在底层便是hash table.除了数组,在线程安全(TSRM).GC.资源管理.Global变量 ...

  7. java基础盲点梳理

    类的基本成员才有默认值 finalize()并非析构,Java中没有析构,使用finalize()通常在于跨语言调用情景:比如使用C进行malloc内存分配以后,要在finalize()方法中进行fr ...

  8. 实战手记：让百万级数据瞬间导入SQL Server

    想必每个DBA都喜欢挑战数据导入时间,用时越短工作效率越高,也充分的能够证明自己的实力.实际工作中有时候需要把大量数据导入数据库,然后用于各种程序计算,本文将向大家推荐一个挑战4秒极限让百万级数据瞬间 ...

  9. .Net中的并行编程-6.常用优化策略

                本文是.Net中的并行编程第六篇,今天就介绍一些我在实际项目中的一些常用优化策略.      一.避免线程之间共享数据 避免线程之间共享数据主要是因为锁的问题,无论什么粒度的锁 ...

  10. netmiko初窥

    paramiko 和 pexpect在笔记里被跳过 因为,他们都可以被netmiko所取代,不想在他们身上浪费太多时间 补一个地方就是,如果用paramiko遇到了connection莫名自己关闭的情 ...