CSS


#zisbb {
width:195px;
margin:20px auto 0px;
-webkit-transform:skew(-8deg, 0deg);
-moz-transform:skew(-8deg, 0deg);
-ms-transform:skew(-8deg, 0deg);
-o-transform:skew(-8deg, 0deg);
transform:skew(-8deg, 0deg);
overflow:auto;
}

#zisbb .bb {
background:black;
width:55px;
height:40px;
margin:12px 10px 0px 0px;
-webkit-border-radius:0px 25px 20px 0px;
-moz-border-radius:0px 25px 20px 0px;
border-radius:0px 25px 20px 0px;
display:block;
}

#zisbb .left {float:left;}
#zisbb .right {float:right;}


HTML


<div id='zisbb'>
<div class='left'>
<div class='bb'></div>
<div class='bb'></div>
</div>
<div class='right' style='position:relative;top:20px;'>
<div class='bb'></div>
<div class='bb'></div>
</div>
<div class='right'>
<div class='bb'></div>
<div class='bb'></div>
<div class='bb'></div>
</div>
</div>


BLACKBERRY IMAGE