Cara Membuat Background Efek Kertas Melipat Dengan CSS

Bagi agan yang sedang atau mau mencoba Membuat Background Efek Kertas Melipat Dengan CSS, berikut caranya.

Taruh CSS berikut diatas kode</b:skin>
.kasep { position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; overflow:hidden; } .kasep:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15; background:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Firefox 3.0 damage limitation */ } .kasep.rounded { -webkit-border-radius:5px 0 5px 5px; -moz-border-radius:5px 0 5px 5px; border-radius:5px 0 5px 5px; } .kasep.rounded:before { border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; }
Untuk warna dasarnya ganti kode warna yang saya tandai drngan warna merah tebal, untuk warna kertas yang melipatnya ganti kode warna yang saya tandai drngan warna biru tebal (sesuaikan dengan keinginan anda). Tapi untuk tips Jika warna dasarnya misalnya putih, maka warna kertas yang melipatnya berwarna putih yang sedikit ke hitaman, ini dimaksudkan agar efek melipatnya nampak.
Contoh:
Misalnya klo dasarnya putih, kode warnanya #fff, maka kode warna kertas melipatnya seperti ini #a0a7b3.
Jangan lupa sesuaikan juga warna textnya, untuk mengatur warna text ganti kode warna yang saya tandai drngan warna hijau tebal

Kode HTMLnya sebagai berikut:
 <div class='kasep'>
     ISI
</div>
<div class='kasep rounded'>
     ISI
</div>
Kode HTML tersebut bisa anda tempatkan sesuai keinginan/kebutuhan