今天要来学的列是这个《Progressive enhancement: pure CSS speech bubbles。Demo页面在这里。Progressive enhancement渐进增强 在《sliding label》 中有提到。这个概念真是无所不在啊，一定要好好掌握。
图1
先看效果图，
图2
今天学习的方法呢，还是copy html+css源码来分析 看别人是怎么写代码 怎么实现的
HTML5 structure—header, hgroup & h1-h6
在.container 这个div里面出现了 下面的代码
<header>
<hgroup>
<h1>Pure CSS speech bubbles</h1>
<h2>By <a href="http://nicolasgallagher.com">Nicolas Gallagher</a></h2>
</hgroup>
<p>The demo page for <a href="http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/">Progressive enhancement: pure <abbr>CSS</abbr> speech bubbles</a>.</p>
<p>For a detailed explanation <a href="bubbles.css">view the <abbr>CSS</abbr> file</a>. It is heavily commented.</p>
<p>All examples use simple, semantic <abbr>HTML</abbr>. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code.</p>
</header>
Div 里面出现了header tag， 还有HTML 5的新的元素, hgroup.
The header element represents a group of introductory or navigational aids.
Note A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos
header元素代表了一组介绍的和导航辅助信息。
注意这里的header元素通常想要用来做section的标题（1个h1-h6元素或者一个hgroup元素），但是这并不是必须的，header元素也可以包括section的目录，搜索表单，或者任何相关的logo。
(来自HTML5 (Author Edition)的解释)
hgroup 是一种header的特殊形式，必须包括切且只能包括一组(至少两个)h1-h6。这里有篇文章《HTML5 structure—header, hgroup & h1-h6》详细讲，应该怎么用header，hgroup和h1-h6来做文章的结构。
Drawing a bubble
先介绍下对应图一的画法
HTML 代码
<p class="triangle-isosceles">这是图一的例子</p>
Css的代码
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c; /* default background for browsers without gradient support */
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:-o-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content:"\00a0";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
z-index:-1;
bottom:-30px; /* value = - border-top-width - border-bottom-width */
left:50px; /* controls horizontal position */
width:0;
height:0;
border-width:15px 15px; /* vary these values to change the angle of the vertex */
border-style:solid;
border-color:#f3961c transparent transparent;
}
从上面的代码可以看出， css分为两个部分 .triangle-isosceles用来画bubbles； .triangle-isosceles:after用来画三角。 作者的代码真的写的相当漂亮清晰哈。 用渐进增强的概念，先满足最基本的内容需求，然后加入css3才支持的圆角功能呢，和渐变的背景。然后用伪元素来画三角.
.triangle-isosceles：after的意思是在 triangle-isosceles之后插入内容。
content:”\00a0″的意思是插入空格，其实也就是占一个“坑”，至于这个坑长什么样子就要有border-width来决定了
bottom的值是负的（上边界和下边界的宽度和）。这个决定了“坑的位置”，靠近bubble
如果想要标准“坑”是三角的宽度和高度都要取0
上面的这些代码就可以画出下图
其他例子可以见demo页面和css文件，自行研究哈
n484
