用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://www.zjmainstay.cn
为了方便各种管理,本人创建了独立博客,博客地址:http://www.zjmainstay.cn 欢迎新老朋友围观.
- merge 实现
今天写了个小程序,做两个已经从小到大排序好的数据的merge. 要求: listA = (1, 3, 5, 10); listB = (4, 6, 12):listA 和listB都是排序由小到大的列 ...
- .NET 产品版权保护方案 (.NET源码加密保护) （转载）
说 明:你希望自己用.net辛辛苦苦做出来的软件被人轻易破解吗?你希望自己花了大量人力物力用.net开发出来的产品被竞争对手轻易获取核心代码吗?这是 一篇比较详尽地介绍如何保护自己的.net源代码的文 ...
- 【入门必备】最佳的 Node.js 学习教程和资料书籍
Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...
- Xcode-显示代码行数
在Xcode菜单中选择Preferences命令,单击Text Editing选项图标,选中Linenumbers复选框.(快捷键苹果键+逗号打开preferences --> Text Edi ...
- mysql根据身份证信息来获取用户属性信息
需要:根据身份证信息来获取用户属性 方法:可以使用如下sql语句: ) ' then '北京市' ' then '天津市' ' then '河北省' ' then '山西省' ' then '内蒙古自 ...
- Spring基础—— SpEL
一.SpEL:Spring 表达式语言,在使用的时候类似于 EL 表达式,但是需要注意的是,SpEL 使用在 Spring Config 文件中. 二.格式:使用 #{} 作为界定符,所有在大括号中的 ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- Asp.net 字符(二)
using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...
- jquery1.9+获取append后的动态元素
jquery 1.9+放弃了live,说是用on代替了! 那么如果我们以前用live来获取jquery动态添加的元素,现在应该用on怎么写呢? 首先: <div id="one&quo ...