Efek Lipatan pada Sudut Elemen

Pernah melihat bentuk sudut elemen atau div yang dilipat? Lihat gambar di atas atau contoh di bawah ini. dibuat menggunakan CSS pseudo-elemen.



Anda juga dapat membuat yang demikian. Tidak rumit untuk membuat sebuah kotak dengan efek sudut terlipat. Ini hanya sebuah kotak berwarna sederhana. Browser tua IE6 dan IE7 pun mampu menampilkan ini.

Mula-mula buatlah dua buah class, misalnya .page dan .lipat.

.page {
  background: #fff;
  width: 250px;
  height: 330px;
  margin: 50px;
 /* Pilihan efek gradasi, boleh tidak disertakan */
  background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), 
color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* 
Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', 
endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

Setelah class page selesai Anda buat, lanjutkan dengan membuat class lipat.
Class lipat inilah yang akan memberi efek adanya lipatan pada sudut sebuah elemen.

.lipat {
position: relative;
/*Efek bayangan, */
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
}

Efek lipatan diatur dalam CSS berikut.

.lipat:before {
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 0px;
height: 0px;
border-bottom: 70px solid #eee;
border-left: 70px solid #272822; /*Atur warna latar, jangan transparan!*/
-webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
-moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
}

Lalu Anda harus membuat struktur HTML seperti berikut untuk menerapkannya dalam postingan. Buatlah dalam mode HTML.

<div class="page lipat">
<p>Telah menceritakan...</p>
</div>

Selamat mencoba.