现在，泡沫对话框是一种比较流行的趋势，一般都是用html和javascript，和或者图片来实现，今天用纯css3和html来实现一些基本的简单的泡沫对话框

  html代码如下：

   <div class="content">
  <h2>The basic bubble variants</h2>
  <p class="triangle-isosceles">This only needs one HTML element.</p>
  <p class="triangle-isosceles top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>
  <p class="triangle-isosceles left">But it could be any element you want.</p>
  <p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>
  <p class="triangle-right">This only needs one HTML element.</p>
  <p class="triangle-right top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>
  <p class="triangle-right left">But it could be any element you want.</p>
  <p class="triangle-right right">The entire appearance is created only with CSS.</p>
 
</div>

css代码如下：

  body {
    padding:0;
    margin:0;
    font:1em/1.4 Cambria, Georgia, sans-serif;
    color:#333;
    background:#fff;
}
a:link, a:visited {
    border-bottom:1px solid #c55500;
    text-decoration:none;
    color:#c55500;
}
a:visited {
    border-bottom:1px solid #730800;
    color:#730800;
}
a:hover, a:focus, a:active {
    border:0;
    color:#fff;
    background:#c55500;
}
a:visited:hover, a:visited:focus, a:visited:active {
    color:#fff;
    background:#730800;
}
h2 {
    margin:0.5em 0 1.5em;
    font-size:1.25em;
    font-weight:normal;
    font-style:italic;
    text-align:center;
}
p {
    margin:1em 0;
}
.content h2 {
    margin:2em 0 0.75em;
    font-size:2em;
    font-weight:bold;
    font-style:normal;
    text-align:left;
}
.content {
    width:500px;
    padding:0 0 50px;
    margin:0 auto;
    position:relative;
    z-index:1;
}
.triangle-isosceles {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#000;
    background:#f3961c;
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background:-moz-linear-gradient(#f9d835, #f3961c);
    background:-o-linear-gradient(#f9d835, #f3961c);
    background:linear-gradient(#f9d835, #f3961c);
 filter:progid:DXImageTransform.Microsoft.gradient(GradinetType=0, startColorstr="#f9d835", endColorstr="#f3961c");
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
.triangle-isosceles.top {
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
    background:-moz-linear-gradient(#f3961c, #f9d835);
    background:-o-linear-gradient(#f3961c, #f9d835);
    backgrou