<!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. util-linux编译unknown architecture 'BSD_LABELSECTOR' undeclared错误

    ------------------------------------------------------------------------------ In :: fdiskbsdlabel.h ...

  2. S5PV210之GPIO模拟I2c时序之pcf8591与at24xx linux3.0.8驱动

    目录:一. 说明 二. 驱动程序说明及问题 三. 案例一       四. 案例二 一. 说明 mini210开发板上带了at24c08, 看了linux内核自带的at24.c的驱动程序,编译下载到看 ...

  3. MySQL正则表达式

    正则表达式作用是匹配方本,将一个模式(正则表达式)与一个文本串进行比较. MySQL用WHERE子句对正则表达式提供了初步的支持,允许你指定用正则表达式过滤SELECT检索出的数据. MySQL仅支持 ...

  4. Linux 终端常用快捷键

    Tab 自动补全 Ctrl+L 清屏 Ctrl+A 移动到头 Ctrl+E 移动到尾 Ctrl+左键头 左移一个单词 Ctrl+右箭头 右移一个单词 Ctrl+U 删除左边所有字符 Ctrl+K 删除 ...

  5. kendo ui之grid列表

    1.test_grid.jsp <html><head> <%@ include file="/WEB-INF/jsp/common/top.jsp" ...

  6. ScorllView中嵌套listView与Viewpager的焦点问题处理

    解决进入该页面直接显示中的listview而不是从页面最顶端开始显示在setAdapter后调用listview的smoothScrollTo(0,20); 解决listview只能显示一条 需要重写 ...

  7. 上架到AppStore？第一次上架之路

    首先,用自己的Developer账户(个人付费),登陆Developer的Acount(注册证书到电脑上这一步以前就做过了,虽然忘了,但是百度上有教程,以后要注册再补-!) 打开证书管理Certifi ...

  8. php+js实现分页

    使用onclick传递参数时,参数为空分页无效.因此无刷新页面时可利用js重新获取input的值同样通过get地址传递到分页显示的php页面.page参数接收和传递方式必须一致为post或get. j ...

  9. ArcMap计算PolyLine中点VBA

    Dim pGeo As IGeometrySet pGeo = [Shape]Dim pPolyline As IPolylineSet pPolyline = pGeoDim pCurve As I ...

  10. android ORM框架ORMLite封装

    源码:http://download.csdn.net/detail/a924571572/9415506 一.框架效率对比 由于目前公司里面android端数据的数据量基本在千条以内,所以选择了更为 ...