用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 ...
随机推荐
- 免费国内外"代码托管服务器"收集
国内 开源中国 http://git.oschina.net/ 支持git 淘宝code http://code.taobao.org/ 支持svn 京东code https://cod ...
- 【Android学习】四种布局方式
一.LinearLayout 线性布局,即一行展开或者一列展开,也可以嵌套,需要注意的属性如下: android:orentation //对齐方式 二.FrameLayout 帧布局,即一层层叠起 ...
- 【原】Linux Raid 实验
本文参照以下两个链接,将实验重做了一遍,目的就是加深印象及提升实操能力 参照链接:http://www.opsers.org/base/learning-linux-the-day-that-the- ...
- 让我们一起Go（十二）
前言: 上篇中,我们讲到了在Go语言中如何定义方法,今天,我们将进一步深入Go语言的面向对象编程. 一.Go语言中的接口 首先来看一个最基本的接口: 和定义一个结构体类似,只不过将struct换成了i ...
- 《Programming with Objective-C》
苹果官方文档:不稳定的传送门 读书笔记共有以下几篇,其他的知识点不重要或者已经熟悉不需记录 <Programming with Objective-C>第三章 Working with O ...
- Python使用libsvm的“ImportError: No module named svmutil”问题
from:http://blog.csdn.net/xmu_jupiter/article/details/46830327 这几天快被Python的一些细节问题整死了,浪费了不少时间.现在把这些记录 ...
- linux2.6.24内核源代码分析（2）——扒一扒网络数据包在链路层的流向路径之一
在2.6.24内核中链路层接收网络数据包出现了两种方法,第一种是传统方法,利用中断来接收网络数据包,适用于低速设备:第二种是New Api(简称NAPI)方法,利用了中断+轮询的方法来接收网络数据包, ...
- datatables.js 简单使用--多选框和服务器端分页
说明:datatables是一款jQuery表格插件.感觉EasyUI的datagrid更易用 内容:多选框和服务器端分页 缘由:写这篇博客的原因是datatables的文档写的不怎么样,找东西很麻烦 ...
- ruby -- 进阶学习（十）自定义路由中:new, :collection和:member的区别
学习链接:http://rubyer.me/blog/583/ RESTful风格的路由动词默认有7个(分别为:index, show, create, new, edit, update, dest ...
- weblogic集群中获取jndi的方式
# The following example specifies a list of WebLogic Servers using the same port: ht.put(Context.PRO ...