实现效果

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. MD5编码工具类 MD5Code.java

    代码如下: package com.util; /** * MD5编码工具类 * http://www.cnblogs.com/sosoft/ */ public class MD5Code { st ...

  2. css3代码让页面倾斜

    教大家一个方法使用CSS把整个网页倾斜,代码只有在支持CSS3.0的浏览器上有效果.目前只有IE9以上版本及firefox高版本支持,其它浏览器没有测试.代码如下 body{ -webkit-tran ...

  3. 一个疑难杂症 IIS URL区分大小写（FF的自动变换URL问题）？

    (II8 VS14 CTP3 Windows7 ASP．NET WEBFORM) 在我的印象里面,IIS的URL在一般情况下面是不分大小写的. 所以下面两个URL应该是一样的. http://loca ...

  4. 为什么很多APP要有启动页面

    我们启动APP时,一般都会是一张含有LOGO的图片.这张图片叫做启动页面. 这个启动页面是必须.一定需要的吗?有什么作用?   这是苹果官方对于iOS启动页的设计说明:   为了增强应用程序启动时的用 ...

  5. Light OJ 1031---Easy Game(区间DP)

    题目链接 http://lightoj.com/volume_showproblem.php?problem=1031 Description You are playing a two player ...

  6. 线程Thread的基础知识学习

    一.线程的基本概念 1.线程是一个程序内部的顺序控制流. 2.Java的线程是通过java.lang.Thread类来实现的. 3.VM启动时会有一个由主方法{public static void m ...

  7. Android 手机卫士4--设置中心显示

    1,自定义属性 SettingActivity.java package com.itheima.mobilesafe74.activity; import com.itheima.mobilesaf ...

  8. 初识windows程序需要了解的知识点

    初识一件事物我们会有陌生,我们慢慢地去了解它就会懂,让我带你们一起了解吧. 一．Form是.Net Framework 定义好的一个最基本的窗体类,具有窗体基本属性和方法 属性            ...

  9. 当子查询碰上NULL

    情景: 现在有如图两个表,boy和girl,对应着Boy和Girl两个bean,有共同字段id.name,另外boy还有个外键grilfriend(指向girl的id) 现在要查询所有的Boy,如果有 ...

  10. 钉钉客户端JS-API权限签名算法.NET版

    前段时间写了一篇博文<钉钉如何进行PC端开发>,在里面并未解决本地生成签名的问题,需要到官网进行生成,由于钉钉门票等认证信息会超期,因此,必须能本地用代码自动更新相关参数信息,来换取签名. ...