<h4>参考：<a href='http://nicolasgallagher.com/pure-css-speech-bubbles/' target='_blank'>Pure CSS speech bubbles</a></h4>
<p>
    例：Twitterの最新のつぶやきを表示してみました。（アイコン：<a href='http://www.blog.spoongraphics.co.uk/freebies/8-free-cute-and-simple-twitter-bird-vector-graphics'>8 Free Cute & Simple Twitter Bird Vector Graphics</a>）
</p>
<style type="text/css">
/* ============================================================================================================================
== OVAL SPEECH BUBBLE (more CSS3)
** ============================================================================================================================ */
/* ------------------------------------------
PURE CSS SPEECH BUBBLES
by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles/

http://nicolasgallagher.com
http://twitter.com/necolas

Created: 02 March 2010
Version: 1.1 (21 October 2010)

Dual licensed under MIT and GNU GPLv2 ｩ Nicolas Gallagher 
------------------------------------------ */

/* NOTE: Some declarations use longhand notation so that it can be clearly
explained what specific properties or values do and what their relationship
is to other properties or values in creating the effect */

/* ============================================================================================================================
== GENERAL STYLES
** ============================================================================================================================ */
blockquote {margin:0; width:300px; }
blockquote p {margin:0;padding:0;text-align:left;}
.content {
    position:relative;
    z-index:1;
    background:transparent url(/content/img/css/bird.jpg) no-repeat 0 150px;
    display:block;
    margin:0; padding:0;
    height:300px;
}
.content span {
    display:block;
    text-align:right;
    font-size:11px;
    font-style:italic;
}
.content div.avatar {
    margin:0 0 5px 0; padding:0;
}
.content div.avatar a {
    text-decoration:none;
    font-size:16px;
    line-height:20px;
    color:#000;
    font-weight:bold;
}
.content div.avatar img {
    margin:0 5px 0 0; padding:0;
    vertical-align:middle;
    width:20px; height:20px;
    overflow:hidden;
    border:2px solid #000;
}
/* ============================================================================================================================
== RECTANGLE-BORDER STYLE WITH CURVE
** ============================================================================================================================ */
.rectangle-speech-border {
    position:relative;
    top:0; left:82px;
    padding:10px 10px;
    margin:0;
    border:10px solid #333;
    text-align:center;
    color:#333;
    background:#fff;
    /* css3 */
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
}
/* creates larger curve */
.rectangle-speech-border:before {
    content:"";
    position:absolute;
    z-index:10;
    bottom:-40px;left:50px;
    width:50px;height:30px;
    border-style:solid;
    border-width:0 10px 10px 0;
    border-color:#333;
    background:transparent;
    /* css3 */
    -moz-border-radius-bottomright:80px 50px;
    -webkit-border-bottom-right-radius:80px 50px;
    border-bottom-right-radius:80px 50px;
}
/* creates smaller curve */
.rectangle-speech-border:after {
    content:"";
    position:absolute;
    z-index:10;
    bottom:-40px; left:50px;
    width:20px; height:30px;
    border-style:solid;
    border-width:0 10px 10px 0;
    border-color:#333;
    background:transparent;
    /* css3 */
    -moz-border-radius-bottomright:40px 50px;
    -webkit-border-bottom-right-radius:40px 50px;
    border-bottom-right-radius:40px 50px;
}
/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border>:first-child:before {
    content:"";
    position:absolute;
    bottom:-40px; left:45px;
    width:10px; height:10px;
    background:#333;
    /* css3 */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border>:first-child:after {
    content:"";
    position:absolute;
    bottom:-10px; left:76px;
    width:24px; height:15px;
    background:#fff;
}
</style>

<div class="content">
    <blockquote class="rectangle-speech-border">
        <p></p>
    </blockquote>
</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var aURL = "http://search.twitter.com/search.json?q=from:cocoism&locale=ja&rpp=1&callback=?";
    var s="";
    $bubble=$("blockquote p");
    $.ajax(
        {
            url: aURL,
            type: 'GET',
            dataType: 'jsonp',
            timeout: 1000,
            error: function(){
                $bubble.html("つぶやきがないみたいだよ。");
            },
            success: function(json){
                $.each(json.results,function(i,item) {
                    $bubble.html("<div class='avatar'><a href='http://twitter.com/"+item.from_user+"' target='_blank'><img src='"+item.profile_image_url+"' width='20' height='20' />@"+item.from_user+"</a></div>"+formatTwitString(item.text)+"<span>"+relativeTime(item.created_at)+"</span>");
                    if(s!="") return false;
                });
            }
        }
    );
});
function formatTwitString(str)
{
    str=' '+str;
    str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
    str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
    str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
    return str;
}
function relativeTime(pastTime)
{    
    var origStamp = Date.parse(pastTime);
    var curDate = new Date();
    var currentStamp = curDate.getTime();
    
    var difference = parseInt((currentStamp - origStamp)/1000);

    if(difference < 0) return false;

    if(difference <= 5)                return "Just now";
    if(difference <= 20)            return "Seconds ago";
    if(difference <= 60)            return "A minute ago";
    if(difference < 3600)            return parseInt(difference/60)+" minutes ago";
    if(difference <= 1.5*3600)         return "One hour ago";
    if(difference < 23.5*3600)        return Math.round(difference/3600)+" hours ago";
    if(difference < 1.5*24*3600)    return "One day ago";
    
    var dateArr = pastTime.split(' ');
    return dateArr[4].replace(/\:\d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
}
</script>