CSS3 Melodi

by Taufik Nurrohman

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> <!-- outer -->

CSS

#outer{
    width:200px;
    height:200px;
    margin:50px auto 0;
    outline:1px dotted red; /* agar lebih jelas */
    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;
}