<!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. Which ports are considered unsafe on Chrome

    1, // tcpmux 7, // echo 9, // discard 11, // systat 13, // daytime 15, // netstat 17, // qotd 19, // ...

  2. struts2 错误提示页面

    以前做的一个网站,最近服务器后台出现一些异常,问题是客户访问一个该网站下不存在的action,为了给客户一个友好的界面提示以及减小服务器端日志文件的内容.就在struts2下进行了如下配置: 在str ...

  3. ad bga扇出 和群组布线

    本文关于如何快速规范的bga布线和扇出做笔记 目的:layout一个ili的3+1的控制板.把线距控制在4mil 这样可以节约制造成本. 问题:需要大改布局.尤其是bga扇出和通道连接的问题. 细节: ...

  4. React学习——ListView组件

    (草稿) 先把代码放上来,再补充说明 <!DOCTYPE html> <html> <head> <title>React ListView</t ...

  5. 好文mark

    用oracle的dblink连接mysql. http://f.dataguru.cn/thread-267150-1-1.html hadoop的机架感知: 本地化策略,以及备份都要知道哪个节点在哪 ...

  6. wireshark流跟踪和分析

  7. 2016-08-05(1) ng-options的用法详解

    http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ng-options-usage/

  8. typedef关键字

    1. typedef的作用 在计算机编程语言中用来为复杂的声明定义简单的别名,与宏定义有些差异.它本身是一种存储类的关键字,与auto.extern.static.register等关键字不能出现在同 ...

  9. BZOJ 1018 线段树维护图连通性

    用8个bool维护即可分别为LURU,LURD,LDRU,LDRD,LULD,RURD,Side[1],Side[2]即可. Side表示这一块有没有接到右边.Merge一下就可以了.码农题,WA了一 ...

  10. Html概要及示例(一)

    Html 简介 Html 是一种超文本标记语言,标记往往成对出现,例如 段落标记<p>  层标记 <div> 以及 <marqueen>等等,标记繁多 但未必就要全 ...