前几天用css3实现了一些基本的泡沫对话框，今天在原来的原理的基础上做了一些复杂的。

 html代码如下

<div class="content">
<p class="triangle-border">This only needs one HTML element.</p>
            <p class="triangle-border top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>
            <p class="triangle-border left">But it could be any element you want.</p>
            <p class="triangle-border right">The entire appearance is created only with CSS.</p>
            
            
            <h2>Simple examples</h2>
            
            <h3 class="example-commentheading">125 comments</h3>
            
            <blockquote class="example-right">
                <p>Design is directed toward human beings. To design is to solve human problems by identifying them and executing the best solution.</p>
            </blockquote>
            <p>Ivan Chermayeff</p>
            
            <blockquote class="example-obtuse">
                <p>It&#8217;s not what you look at that matters, it&#8217;s what you see.</p>
            </blockquote>
            <p>Henry David Thoreau</p>
            
            <blockquote class="example-twitter" cite="http://twitter.com/necolas/status/9880187933">
                <p>Takes me longer to write up blog posts on experiments or projects than to create them in the first place.</p>
            </blockquote>
            <p><a href="http://twitter.com/necolas">@necolas</a> at <a href="http://twitter.com/necolas/status/9880187933">4:05 PM March 2nd 2010</a></p>

            <div class="example-number">57</div>


            <h2>More complex CSS3 examples</h2>
            <p>Some more experimental speech bubbles that try to limit the damage in browsers lacking the necessary CSS3 support.</p>

            <div class="pinched">
                <p><strong>It doesn&#8217;t matter what the first child element of this div is</strong>...but it does need a child element.</p>
            </div>

     &