实现效果

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. 2016 .net 招聘

    职位月薪:面议 工作地点:成都 发布日期:2016-02-23 工作性质:全职 工作经验:1-3年 最低学历:大专 招聘人数:5人 职位类别:软件工程师 岗位职责:   1. 负责项目或产品的开发.单 ...

  2. 【C#】第3章学习要点（二）自定义类和结构

    分类:C#.VS2015 创建日期:2016-06-19 使用教材:(十二五国家级规划教材)<C#程序设计及应用教程>(第3版) 一.要点概述 别人提供的类都是为了简化你的工作量用的,可是 ...

  3. wpf 自定义圆形按钮

    wpf 自定义圆形按钮 效果图 默认样式 获取焦点样式 点击样式 下面是实现代码: 一个是自定义控件类,一个是控件类皮肤 using System; using System.Collections. ...

  4. Hello, Android 快速入门

    Hello, Android Android 开发与 Xamarin 简介 在这两节指南中,我们将 (使用 Xamarin Studio或 Visual Studio)建立我们的第一个 Xamarin ...

  5. 通过HttpWebRequest请求https接口

    一.为什么进行代理接口的开发: 有些项目需要访问被墙了哒网站,比如前不久公司开发项目需要使用google地图的接口,而google在中国被墙了,所有打算做一个代理接口服务,将代理放到国外服务器上,通过 ...

  6. 项目总结笔记系列 Social Hub KT Session1

    项目后台访问地址: URL:http://socialhub-itg-app.itcs.hp.com/data_feed_service/main.jsp 或者URL:http://c0048925. ...

  7. ejs-mate

    安装 npm install ejs-mate --save 模板方法: 1.layout 2.partial 3.block

  8. ProgressBar.js – 漂亮的响应式 SVG 进度条

    ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆 ...

  9. swift学习笔记之-类和结构体

    //类和结构体 import UIKit //类和结构体 /* 1.枚举enum.结构体struct和String.Array.Dictionary类型,都属于值传递类型,被赋值给新的常量或变量时传递 ...

  10. html5的发展历程和由此引起的政治斗争

    2007年,乔布斯断言拒绝Flash并预言HTML5时代来临,IT行业就对HTML5产生了一股宗教热情.HTML5有着许多出众的特性,可以直接在网页上绘图.嵌入音视频.实现信息互动,可以跨越iOS.A ...