CSS3 Melodi

Lihat Demo

CSS

#outer {
  width:200px;
  height:200px;
  margin:50px auto 0;
  position:relative;

  /* dilakukan setelah 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 -->