来源：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制作冒泡提示框的更多相关文章

  1. 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  2. 纯CSS实现tooltip提示框，CSS箭头及形状

    本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...

  3. css制作tips提示框，气泡框，制作三角形

    有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...

  4. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

  5. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  6. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  8. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  9. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

随机推荐

  1. 分布式内存对象缓存系统Memcached-Linux下使用

    Linux下Memcached的使用 1.       安装文件下载 1.1下载memcached服务器端安装文件 版本: memcached-1.4.2.tar.gz 下载地址:http://www ...

  2. SULogger：iOS日志可视化工具

    前言 debug对于咋们程序员来说家常便饭,但有时候我们会遇到一种情况:开发某个功能时,需要在某个特定场景下进行调试,而这个场景并没有MacBook来进行连接debug,偏偏我们需要获得调试时的一些信 ...

  3. 是什么让 Ubuntu 选用 Qt 而不是 GTK？

    是什么让 Ubuntu 选用 Qt 而不是 GTK? 一个正在发生的事实,Ubuntu正在不断Qt化!我曾一直在抱怨的Software Center,今日一看源码,竟然有softwarecenter/ ...

  4. PHP优化杂烩

    讲 PHP 优化的文章往往都是教大家如何编写高效的代码,本文打算从另一个角度来讨论问题,教大家如何配置高效的环境,如此同样能够达到优化的目的. pool 一个让人沮丧的消息是绝大多数 PHP 程序员都 ...

  5. 在Ubuntu上为Android系统内置Java应用程序测试Application Frameworks层的硬件服务（老罗学习笔记6）

    一:Eclipse下 1.创建工程: ---- 2.创建后目录 3.添加java函数 4.在src下创建package,在package下创建file 5.res---layout下创建xml文件,命 ...

  6. Ext2.0之Tabpanel AJAX远程加载多标签页面模式开发技巧

    目前开发的方式是采用远程load页面来实现多页面效果,类似于126邮箱多标签页效果.但是比126邮箱的方式更好,因为页面打开后是load到本地的,126似乎还会重新请求.在近期项目该开发方式已经基本成 ...

  7. Android开发之SmsManager和SmsMessage

    Android的手机功能(通话与短信)都放在android.telephony包中,到了4.4时(也就是API19)android.provider.Telephony及相关类横空出世辅助电话功能以及 ...

  8. Codeforces Round #259 (Div. 2) C - Little Pony and Expected Maximum

    题目链接 题意:一个m个面的骰子,抛掷n次,求这n次里最大值的期望是多少.(看样例就知道) 分析: m个面抛n次的总的情况是m^n, 开始m==1时,只有一种 现在增加m = 2,  则这些情况是新增 ...

  9. 数据库锁机制（一）——概述

    注:内容为自己的推理认知+网络,如有错误和不合理之处,敬请指出. 在多线程环境中我用使用线程锁处理并发问题,而在数据库系统中,并发问题可以细化到事务级别,而DBMS对此的处理方案就是使用锁. 为了适应 ...

  10. 原创-兼容IE8的placeholder

    !function (o) { o.fn.extend({ PlaceHolder: function () { var _isEmpty = function (val) { return (val ...