纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html
前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html
在此基础上,今天分享一篇文章给大家,如果利用CSS制作冒泡提示框。
先看2张效果图:
CSS:
/*
对话气泡
用法:使用.speech-bubble和.speech-bubble-DIRECTION类
<div class="speech-bubble speech-bubble-top">Hi there</div>
*/ .speech-bubble {
position: relative;
background-color: #292929; width: 200px;
height: 150px;
line-height: 150px; /* 垂直居中 */
color: white;
text-align: center;
border-radius: 10px;
font-family: sans-serif;
} .speech-bubble:after {
content: '';
position: absolute; width: 0;
height: 0; border: 15px solid;
} /* 箭头的位置 */
.speech-bubble-top:after {
border-bottom-color: #292929;
left: 50%;
bottom: 100%;
margin-left: -15px;
}
.speech-bubble-right:after {
border-left-color: #292929; left: 100%;
top: 50%;
margin-top: -15px;
} .speech-bubble-bottom:after {
border-top-color: #292929;
top: 100%;
left: 50%;
margin-left: -15px;
} .speech-bubble-left:after {
border-right-color: #292929;
top: 50%;
right: 100%;
margin-top: -15px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="maopao.css">
<title>Test</title>
</head>
<body>
<div class="speech-bubble speech-bubble-top">
箭头在顶部
</div>
<br/>
<div class="speech-bubble speech-bubble-bottom">
箭头在底部
</div>
<br/>
<div class="speech-bubble speech-bubble-left">
箭头在左侧
</div>
<br/>
<div class="speech-bubble speech-bubble-right">
箭头在右侧
</div>
</body>
</html>
演示地址:http://jsfiddle.net/80r9kjs2/embedded/result/
下一篇:PHP:产生不重复随机数的方法
纯CSS制作冒泡提示框的更多相关文章
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- 纯CSS实现tooltip提示框,CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...
- css制作tips提示框,气泡框,制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
- 纯css来实现提示框
用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS制作三角(转)
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 如何使用纯CSS制作特效导航条?
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
随机推荐
- Photoshop:制作方块背景
1.填充背景色 2.滤镜->杂色->添加杂色 3.滤镜->像素化->马赛克 4.添加横线,明度-10 最终效果 附: 利用:查找边缘.最小值,还可以做这样的效果
- pinyin4j
最近在倒腾与搜索相关的拼音检查技术,顺便看了一下中文转拼音开源插件pinyin4j的源码,参考资料:http://blog.csdn.net/hfhwfw/archive/2010/11/23/603 ...
- Right Column - 右侧栏目
function share(sType){ var sName = "Yorhom\'s Game Box"; var title='Yorhom\'s Game Box', _ ...
- 基于SimHash的微博去重
一.需求:对微博数据进行去重,数据量比较小,几十万条左右. 二.解决方案 1.采用SimHash的指纹信息去重方法. 三.实现方案 1.对每一条微博使用tf-idf与特征词 2.使用每条微博的特征词, ...
- MariaDB10.2.X-新特性2-支持check约束and with as
前几天写了一篇MariaDB10.2支持分析函数,大家印象中MySQL不支持with as ,check约束,那么MariaDB10.2也同样给你惊喜 1.with as MariaDB [test1 ...
- java类的加载以及初始化顺序
类的加载和初始化的了解对于我们对编程的理解有很大帮助,最近在看类的记载方面的问题.从网上查阅了若干文章,现总结如下: 我们通过一段代码来了解类加载和初始化的顺序: package com.classl ...
- OGG-00782 - OGG 11.2.1.0.2 FOR Windows x64 Microsoft SQL Server
OS ENV:主机名: WIN-NO42QRNPMFAOS 名称: Microsoft Windows Server 2008 R2 Datacenter OS ...
- linux/shell sort命令
sort是在Linux里常用的一个命令,用来排序的 # man sort 1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最 ...
- Redis系列文章导读
1. Redis简介 1.1 Redis VS Memcached 2. Redis安装教程 3. Redis数据类型 4. Redis常用命令 4.1 key 4.2 string 4.3 hash ...
- Codeforces Round #261 (Div. 2) D. Pashmak and Parmida's problem (树状数组求逆序数 变形)
题目链接 题意:给出数组A,定义f(l,r,x)为A[]的下标l到r之间,等于x的元素数.i和j符合f(1,i,a[i])>f(j,n,a[j]),求i和j的种类数. 我们可以用map预处理出 ...