CSS
#outer { width:200px; height:200px; margin:50px auto 0; position:relative; /* dilakukan sehabis gambar sudah tersusun */ -webkit-transform:skew(0deg, -10deg); -moz-transform:skew(0deg, -10deg); -ms-transform:skew(0deg, -10deg); -o-transform:skew(0deg, -10deg); transform:skew(0deg, -10deg); } .garis { width:4px; height:176px; background:#000; position:absolute; } .garis.satu { top:0px; left:50px; } .garis.dua { top:0px; right:0px; } .bulat { width:50px; height:40px; background:#000; -webkit-border-radius:70px / 60px; -moz-border-radius:70px / 60px; border-radius:70px / 60px; position:absolute; } .bulat.satu { bottom:0px; left:4px; } .bulat.dua { bottom:0px; right:0px; } .kotak { width:150px; height:20px; background:#000; position:absolute; right:0px; } .kotak.satu { top:0px; } .kotak.dua { top:30px; }HTML
<div id="outer"> <div class="kotak satu"></div> <div class="kotak dua"></div> <div class="garis satu"></div> <div class="garis dua"></div> <div class="bulat satu"></div> <div class="bulat dua"></div> </div> <!-- end outer -->