Efek Kertas Terlipat dengan CSS

CSS memang sangat menawarkan berbagai efek di dalamnya, salah satunya adalah membuat efek kerta terlipat biasanya untuk membuat efek seperti ini kita mengandalkan aplikasi design seperti photoshop atau corelDraw. Dan terbilang cukup susah serta masuk dengan kategori tidak dinamis karena isinya tidak dapat dirubah.

Sedangkan bila menggunakan efek dari CSS, efek tersebut akan berjalan secara dinamis. Artinya efek tersebut akan tetap ada meskipun menggunakan teks dalam ukuran kecil ataupun besar. Baiklah berikut hal yang diperlikan, diperlukan pseudo element untuk membuat efek tersebut serta menggunakan dasar-dasar pembuatan segitiga dengan CSS. Dan berikut kode CSS-nya:

.kertas {
 position:relative;
 width:20%;
 padding:1em 1.5em;
 margin:2em auto;
 color:white;
 background:#689EF3;
 overflow:hidden;
}
.kertas:before {
 content:"";
 position:absolute;
 top:0;
 right:0;
 border-width:0 40px 40px 0;
 border-style:solid;
 border-color:white white #4185F1 #4185F1;
 display:block;
 width:0;
}

Perhatikan bagian border-color, bagian tersebutlah yang kita manfaatkan untuk membuat segitiga dari sebuah persegi yang sisi lainya diberi warna putih. Sedangkan untuk memperlebar kertas yang terlipat cukup menambah pada code border-width:
Untuk pemanggilannya dalam kode HTML adalah seperti berikut:

<div class='kertas'>
Contoh penggunaan efek kertas terlipat
dengan css
</div>

Contoh :

Contoh penggunaan efek kertas terlipat
dengan css

Untuk Demo secara langsung, dapat dilihat di atas di bawah teks contoh.

Selamat berkreasi...:)

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250