Code
[[module CSS]]
/* This Code is Copyright 2010 Worldwide Media Designs and Signs Inc. and is free to use only for wikidot users! Others have to make a donation to one of my sites */
/* The Froopi Twitter Box */

.froopitwitterbox-container {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: auto;
}

.froopitwitterbox {
    width: 199px;
    padding: 10px 5px 5px 5px;
    margin:10px;
    position: relative;
    z-index: 25;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    background: #f5f5f5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
    background-image: -moz-linear-gradient(top,#f5f5f5,#e5e5e5);
    color: #111111;
    font-size: 90%;
}

.froopitwitterbox h3 {
    position: relative;
    width: 220px;
    color: #fff;
    padding: 10px 5px;
    margin: 0;
    left: -15px;
    z-index: 28;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    background: #b5b5b5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#b5b5b5));
    background-image: -moz-linear-gradient(top,#eeeeee,#00558b);
    font-size: 160%;
    text-align: center;
    text-shadow: #aaaaaa 0 -1px 1px;
    font-weight: bold;
}

.froopitwitterbox-container .triangle-l {
    border-color: transparent #AAAAAA transparent transparent;
    border-style:solid;
    border-width:13px;
    height:0;
    width:0;
    position: absolute;
    left: -13px;
    top: 47px;
    z-index: 0; /* displayed under infobox */
}

.froopitwitterbox-container .triangle-r {
    border-color: transparent transparent transparent #AAAAAA;
    border-style:solid;
    border-width:13px;
    height:0;
    width:0;
    position: absolute;
    left: 216px;
    top: 47px;
    z-index: 0; /* displayed under infobox */
}

.froopitwitterbox a {
    color: #aaaaaa;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
}

.froopitwitterbox a:hover, .infobox a:focus {
    color: #00558b;
    background: transparent;
    text-decoration: none;
    border-bottom: none;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
}

.froopitwitterbox-container a {
    color: #FFFFFF;
}

.froopitwitterbox-container a:hover {
    color: #00558b;
}
[[/module]]
In action
link to the implemented solution on a Wikidot site or put a working example here