用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 ...
随机推荐
- iOS 模拟器键盘弹出以及中文输入
1.虚拟键盘的弹出与收起切换: 快捷键:command+shift+K 2.中文输入: Xcode 菜单项 --> Product --> Scheme --> Edit Schem ...
- 重新发现梯度下降法--backtracking line search
一直以为梯度下降很简单的,结果最近发现我写的一个梯度下降特别慢,后来终于找到原因:step size的选择很关键,有一种叫backtracking line search的梯度下降法就非常高效,该算法 ...
- MarkDown写blog（测试）
区块元素 段落和换行 一个 Markdown 段落是由一个或多个连续的文本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行.比方说,若某一行只包含空格和制表符,则该 ...
- Ubuntu主题美化--使用WPS风格
五一就这么过去了,我也没有出去玩,一个人闲的蛋疼,无聊就把ubuntu美化一下. 闲话不多说,先看效果: 壁纸是我自己制作的的,如果喜欢另存一下下面这张图设置成背景就可以了,分辨率是1366x768. ...
- Java知多少（111）数据库之修改记录
修改数据表记录也有3种方案. 一.使用Statement对象 实现修改数据表记录的SQL语句的语法是: update表名 set 字段名1 = 字段值1,字段名2 = 字段值2,……where特 ...
- AssetBundle系列——游戏资源打包（一）
将本地资源打包,然后放到资源服务器上供游戏客户端下载或更新.服务器上包含以下资源列表:(1)游戏内容资源assetbundle(2)资源维护列表,包含每个资源的名字(完整路径名)和对应的版本号[资源名 ...
- java中Finally块的执行
在try{}catch{}finally{}块中,都知道finally子块是肯定会执行的.当然也有个别情况,当在try{}或者catch{}块中出现强制退出System.exti(int)时,fina ...
- UML系列05之 基本流程图
概要 软件的基本流程图是我们在学习编程时的必修课,它很简单,却很实用.需要说明的是,UML并不包括软件的基本流程图,但是为了方便我自己查阅,所以将基本软件流程图归纳到UML系列当中.读者切不要认为基本 ...
- 剑指架构师系列-Linux下的调优
1.I/O调优 CentOS下的iostat命令输出如下: $iostat -d -k 1 2 # 查看TPS和吞吐量 参数 -d 表示,显示设备(磁盘)使用状态:-k某些使用block为单位的列强制 ...
- iOS-动画效果（首尾式动画，代码快动画，核心动画，序列帧动画）
一.各个动画的优缺点 1.首尾动画:如果只是修改空间的属性,使用首尾动画比较方便,如果在动画结束后做后续处理,就不是那么方面了. 2.核心动画:有点在于对后续的处理方便. 3.块动画: (1)在实际的 ...