Efek Lipatan pada Sudut Elemen

Cara membuat efek lipatan sudut elemen atau div menggunakan CSS.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

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>

Rahasia letak lipatan terdapat pada baris kode yang saya highlight. Jika Anda ingin lipatannya ada di atas kanan, maka ubahlah properti left menjadi right lalu border-left menjadi border-right.

Selamat mencoba.