<!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. C#对Dictionary的按Value排序

    使用List对其进行排序 using System; using System.Collections.Generic; using System.Text; namespace ConsoleApp ...

  2. The Nine Indispensable Rules for HW/SW Debugging 软硬件调试之9条军规

    I read this book in the weekend, and decided to put the book on my nightstand. It's a short and funn ...

  3. The property on could not be set to a 'Int16' value.You must set this property to a non-null value of type ‘Int32’.”

    在vs2010 EF4中查询数据总是报错: The property  on “XX” could not be set to a 'Int16' value. You must set this p ...

  4. Spark的WorkCount的例子

    之前为了搭建scala开发spark的环境花了几天的时间,终于搞定了,具体可以参考:http://www.cnblogs.com/ljy2013/p/4964201.html   .下面就是用一个示例 ...

  5. ubuntu 14.04安装搜狗输入法

    安装sougou for linux: 1.从官网http://pinyin.sogou.com/linux/?r=pinyin下载对应版本 2.由于版本原因需要卸载fcitx: sudo apt-g ...

  6. [Python Fabric] [SSH] Mac OS X 10.9 + Vagrant虚拟环境使用Python Fabric进行SSH远程登录的简单实验

    1. ssh客户端生成key $ Generating public/private rsa key pair. Enter file in which to save the key (/Users ...

  7. 从UWP到SWIFT － TableBarController 和 Pivot

    现在我还不是特别能适应swift中页面做bar的做法,感觉很奇怪. 现在我正在做一个简单的新浪微博,有一个主页,顶部有导航栏,底部是选项卡. 如果用wup来做的话,顶部应该是我们自己写的Usercon ...

  8. 使用PowerDesigner导出MySQL数据库建模

    数据库服务器在linux上面,客户端本子win8系统 1.安装odbc 1.1 下载odbc,http://dev.mysql.com/downloads/connector/odbc/  Windo ...

  9. Guess Number Higher or Lower II--困惑

    今天,试着做了一下LeetCode OJ上面的第375道题:Guess Number Higher or Lower II 原题链接:https://leetcode.com/problems/gue ...

  10. Maven 标签详解

    <span style="padding:0px; margin:0px"><project xmlns="http://maven.apache.or ...