<!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. AX多线程编译

    1.在命令行里先定位到AOS sever的BIN文件夹下(CD "AOS sever的BIN路径") CD C:\Program Files\Microsoft Dynamics ...

  2. java语言程序设计(一)-2

    (一)jdk安装及环境变量配置 1.jdk下载 下载地址http://www.oracle.com/technetwork/java/javase/downloads/index.html,下载SE标 ...

  3. nginx+tomcat+dubbo单机部署多台dubbo应用

    前面的博客已经介绍如何使用nginx+tomcat,今天做的是如何在单台服务器上如何部署多台dubbo 应用的集群. 由于在项目中遇到了这个问题,今天就把它记录下来. 1.

  4. Android 中dp和px

    dp是虚拟像素,在不同的像素密度的设备上会自动适配,比如: 在320x480分辨率,像素密度为160,1dp=1px 在480x800分辨率,像素密度为240,1dp=1.5px 计算公式: 1dp* ...

  5. Android数据持久化技术 — — —SharedPreferences

    SharedPreferences是使用键值对的方式来存储数据. 要想使用SharedPreferences来存储数据,必须获取SharedPreferences对象,获取SharedPreferen ...

  6. asp.net C#获取程序文件相关信息

    代码如下 复制代码 using System.Reflection;using System.Runtime.CompilerServices; //// 有关程序集的常规信息是通过下列// 属性集控 ...

  7. android SDK 离线下载更新

    http://blog.csdn.net/harvic880925/article/details/37913801 前言:在公司配置eclipse做android开发,真是烦死了,不知公司做了哪门子 ...

  8. What does it mean to “delegate to a sister class” via virtual inheritance?

    Consider the following example: class Base { public: ; ; }; class Der1 : public virtual Base { publi ...

  9. HTML之iframe

    iframe:是框架的一种形式. 属性: frameborder=0/1 表示是否显示周围边框 0--否 1--是 width,height:设置的边框宽高,具体数值不需要加单位,也可用百分比 mar ...

  10. UE4 UriEncode 问题

    当Uri 路径中带中文字符时,需要进行编码 否则会照成不可预见错误: FString temp = FGenericPlatformHttp::UrlEncode(queryStr); FString ...