转~~~ DIV+CSS实现三角形提示框
<!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实现三角形提示框的更多相关文章
- 纯CSS实现tooltip提示框，CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...
- 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- 纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- css制作tips提示框，气泡框，制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
- 用css实现云状提示框
经常会用到云状提示框,如图: 基本框架是这样,以三角在左侧为例: <div class="container"> <div class="content ...
- 纯css来实现提示框
用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...
- css画一个提示框
用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- CSS写的提示框（兼容火狐IE等各大浏览器）
项目上使用jQuery的Tooltip组件,在谷歌上正常,在火狐和IE下没有效果,所以根据谷歌的提示框单独用CSS写了个提示框,比较好的兼容了火狐和IE,且效果一样 原Tooltip代码: $('#d ...
随机推荐
- iOS常用开发资源整理
在行--专家付费咨询 杂项 App Release Checklist—iOS App发布清单. Hey Focus—帮助你专注于一个任务. Objective Cloud—Objective C A ...
- Unity3D 一个较常见的错误信息“rect[2] == rt->GetGLWidth() && rect[3] == rt->GetGLHeight()”
rect[2] == rt->GetGLWidth() && rect[3] == rt->GetGLHeight() 这个错误信息的具体含义我还不太清楚.它出现以后会不停 ...
- mount: /dev/sdb1 already mounted or /mnt/hdb busy 导致NameNode无法启动
最近,公司由于断电导致的服务器关机,等到来电了,重启集群发现Namenode无法启动,查看原因是由于无法加在faimage文件,在查看一下Namenode的磁盘挂在情况(df -h命令查看),发现磁盘 ...
- 浅谈Android系统移植、Linux设备驱动
一.Android系统架构 第一层:Linux内核 包括驱动程序,管理内存.进程.电源等资源的程序 第二层:C/C++代码库 包括Linux的.so文件以及嵌入到APK程序中的NDK代码 第三层:An ...
- Centos配置国内yum源
网易(163)yum源是国内最好的yum源之一 ,无论是速度还是软件版本,都非常的不错,将yum源设置为163yum,可以提升软件包安装和更新的速度,同时避免一些常见软件版本无法找到.具体设置方法如下 ...
- mediawiki安装
下载wiki,我用的mediawiki-1.23.6 版本. 服务器是window2008 r2 的. 下载xampp,或者wamp都可以,我的用的禅道安装的xampp,解压后直接放在htdocs目录 ...
- WebGL中添加天空盒的两种方法
天空盒 的添加可以让模型所在的场景非常漂亮,而其原理也是非常简单的,相信看完下面代码就可以明白了. 说到天空盒的两种方法,倒不如说是两种写法,分别用了纹理加载的两个方法:loadTexture和loa ...
- asp.net关于如何准许api跨域访问
首先需要在原api接口的程序中在web.config添加如下节点(在<system.webServer>节点下) <!--准许跨域请求--> <httpProtocol& ...
- [SSH] SSH学习笔记 - 远程登录
1.SSH登陆/登出命令 $ ssh <hostname> #登入 $ exit #登出 known_hosts 每个用户都有自己的known_hosts文件,路径:(username)/ ...
- Windows多网卡上网设置
http://blog.tianya.cn/blogger/post_show.asp?BlogID=1566293&PostID=12984307