<!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>

参考地址 ： https://xianfei689.github.io/hg-demo/pc/toast/toast.html

转~~~ DIV+CSS实现三角形提示框的更多相关文章

  1. 纯CSS实现tooltip提示框，CSS箭头及形状

    本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...

  2. 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  3. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

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

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

  5. css制作tips提示框，气泡框，制作三角形

    有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...

  6. 用css实现云状提示框

    经常会用到云状提示框,如图: 基本框架是这样,以三角在左侧为例: <div class="container"> <div class="content ...

  7. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

  8. css画一个提示框

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

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

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

随机推荐

  1. ucenter 新增用户后 自动登录discuz 不用激活

    uc_client models user.php function add_user($username, $password, $email, $uid = 0, $questionid = '' ...

  2. 查找n个数字中的最大值

    闲来无事,试试用arg_list查找n个数字中的最大者. 又因为本人喜欢模板, 所以就早早的写了以下代码, 没有经过严格测试. /*********************************** ...

  3. ASP.NET后台调用前台JS函数的三种常见方法

    第一种:使用普通的添加控件中的Attributes属性进行调用 例如,像一般的普通的按钮:Button1.Attributes.Add("onclick","MyFun( ...

  4. 利用CSOM向列表添加文件夹

     博客地址:http://blog.csdn.net/FoxDave 本文只为记录一下这个小细节,不会过多赘述,开发可以看懂. 如果想向一个列表或库中添加文件夹,平时我们自然想到的是list.ro ...

  5. C# 水印透明度图片

    /// <summary> /// 在一张图片的指定位置处加入一张具有水印效果的图片 /// </summary> /// <param name="Sourc ...

  6. 一个很奇怪的问题,程序没有改动加密参数应该也没有变化.但是两次的加密结果却不一致.md5加密问题

    从图上我们看出20160803的加密结果是AAEBA9C578EA522215EAE76AFCAF250.时间是9.4分 现在我们再看这个同样的加密地址与时间结果却是另一种 31672B16..... ...

  7. 用css实现条纹背景

    我先额外的说一下怎么用CSS绘制三角形: 绘制三角形是把边框加粗,将元素的宽高都设为0,让其余的边框颜色透明,下面我们来看实现的代码: 先把边框的颜色设置成不同颜色: #div{ border-col ...

  8. 关于jetty项目中的问题.

    在某台虚拟机上部署的项目出现的问题: 我想要更改定义的owl文件,重启服务器,却打不开网页. 1.couldnot found owl ,然后我拷贝一份owl到work/config目录下,继续更改配 ...

  9. Android锁屏或灭屏状态下，快速按两次音量下键实现抓拍功能（1.2Framework层使用startService形式实现）

        如前一篇博文所分析,我们可以使用广播的形式在快速按下两次音量下键的时候发出广播,以方便客户端进行捕捉.既然有两种方式可以实现该Issue那么哪种方式是首选呢?     我个人推荐使用启动服务的 ...

  10. 远程联机linux主机

    远程联机linux主机 推荐使用 ssh  如 ssh user@www.abc.com(ssh使用公钥+私钥非对称加密,数据传输安全,不要使用telnet) 传输文件:sftp 或者 scp 若想使 ...