用css伪类实现提示框效果
题目要求用css实现下图效果：
很明显难点就在那个多出去的三角形上，下面代码是用一个div来实现的，用到了伪类 : befor和 : after，使用这两个伪类活生生的在div之前和之后多出了“那么点东西”，然后设置其边框，形成一黑色三角形，在用after造出另一白色三角形，让白色三角形位置向后移动，正好流出黑色三角形边框：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>testcss</title>
<style>
#demo{
width: 100px;
height:100px;
border:2px solid #000;
}
#demo:before{
content:'';
display: block;
width: 1px;
height:1px;
position: relative;
top:20px;
left:100px;
border-left: 20px solid #000;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
}
#demo:after{
content:'';
display: block;
width: 1px;
height:1px;
position: relative;
top:-11px;
left:97px;
border-left: 20px solid #fff;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
} </style>
<script type="text/javascript">
window.onload=function(){
}
</script>
</head>
<body>
<div id='demo'></div>
</body>
</html>
用css伪类实现提示框效果的更多相关文章
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- css伪类实现文字两侧划线效果
css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...
- CSS伪类before，after制作左右横线中间文字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
- (五)CSS伪类(Pseudo-class)
CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...
- CSS伪类整理笔记
0 伪元素 虚拟的一个元素,用于向已有的元素添加特殊效果,可用标签元素实现该效果. css3中规定:伪元素的由两个冒号::开头,然后是伪元素的名称.用两个冒号::是为了区别伪类和伪元素(CSS2中并没 ...
- 关于css伪类，伪元素详解总结
伪类 伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰.常见的几种伪类是: :link , :visited , :hover , :active , :first-ch ...
随机推荐
- [PaPaPa][需求说明书][V0.1]
PaPaPa软件需求说明书V0.1 前 言 我觉得我们废话不能多,废话一多的话大家就找不到重点了,其实本项目是出于技术研究的目的来开发的,大家讨论了半天决定要做社(yue)交(pao)类的项目. ...
- ZOJ 2112 Dynamic Rankings（动态区间第 k 大+块状链表）
题目大意 给定一个数列,编号从 1 到 n,现在有 m 个操作,操作分两类: 1. 修改数列中某个位置的数的值为 val 2. 询问 [L, R] 这个区间中第 k 大的是多少 n<=50,00 ...
- tomcat6 使用comet衍生出的两个额外问题
开发了一个轮询推送功能,网上也有很多文章讲这个就不说怎么做的了.现在发现两个问题: 一:就是登录进主页面后,由于浏览器在不停轮询,导致后端认为前端一直在操作,而正常设定的session超时就跳转到登录 ...
- 【转载】Ubuntu下SVN安装和配置
一.SVN安装 1.安装包 1.$ sudo apt-get install subversion 2.创建项目目录 $ sudo mkdir /home/xiaozhe/svn $ cd /home ...
- fork()函数详解
原文链接:http://blog.csdn.net/jason314/article/details/5640969 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函 ...
- EXCEL 数字+E+数字 自动识别为指数形式的解决办法
1.今天从数据库导出excel表时,出现本来为"2E3"的单元格错误显示为"2.00E+03"的情况 2.而设置 单元格格式 为"文本"后, ...
- [python]新手写爬虫v2.5（使用代理的异步爬虫）
开始 开篇:爬代理ip v2.0(未完待续),实现了获取代理ips,并把这些代理持久化(存在本地).同时使用的是tornado的HTTPClient的库爬取内容. 中篇:开篇主要是获取代理ip:中篇打 ...
- Cocos2d-x数据存储
分别是使用UserDefault,内置文件管理和sqlite3数据库的一般方式: 主要代码: bool DataScene::init(){ if (!Layer::init()){ return f ...
- 使用自带的JavaScriptSerializer序列化实体 指定的属性如何不序列化
public class GridConfig { public string width = "100%"; public string source = "dataA ...
- JS数组追加数组采用push.apply的坑
JS数组追加数组没有现成的函数,这么多年我已经习惯了a.push.apply(a, b);这种自以为很酷的,不需要写for循环的写法,一直也没遇到什么问题,直到今天我要append的b是个很大的数组时 ...