Membuat Effect Lipatan Dengan CSS

DemoDownload 

Effect Lipatan Dengan CSS adalah sebuah effect dengan menggunakan CSS yang akan membuat sudut atas pada sebuah layout terlipat. Untuk membuatnya hanya perlu menggunakan CSS & HTML. Untuk Tutorial lengkap cara Membuat Effect Lipatan Dengan CSS ikut langkah-langkah berikut ini.

Code HTML

Markup HTMLnya sederhana. Sebagai contoh content wrappernya gunakan section tag.

<section>
  <h2>Folded Corner</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sunt, quidem suscipit...</p>
</section>

Bagaimana? Mudah bukan... Eits, tapi tutorialnya belum selesai selanjutnya tambahkan CSS Structure

Code CSS

Code CSS yang di gunakan adalah pseudo element ::before dan ::after . OK untuk code CSSnya copy code berikut ini.

section {
  position: relative;
  margin-bottom: 40px;
  padding: 40px;
  background-color: #96a5be;
}
section:last-child {
  margin-bottom: 0;
}
section:before, section:after {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  right: 0;
  content: "";
}
section:before {
  border-top: solid 20px #fff;
  border-right: solid 20px #fff;
  border-left: solid 20px transparent;
  border-bottom: solid 20px transparent;
}
section:after {
  border-bottom: solid 20px #5b7093;
  border-left: solid 20px #5b7093;
  border-right: solid 20px transparent;
  border-top: solid 20px transparent;
}

OK, code yang sudah di dapatkan di atas adalah code basic CSS Folded Corner Effect. Untuk mempercantik penampilannya bisa gunakan class .border-radius untuk membuat fold effect terlihat agak melengkung atau bisa menggunakan class .shadow untuk menambahkan bayangan pada fold effect.

Menambahkan Border Radius

Untuk Code HTMLnya seperti berikut ini

<section class="border-radius">
  <h2>Folded Corner</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sunt, quidem suscipit...</p>
</section>

Dan untuk Code CSSnya seperti di bawah ini

.border-radius {
  border-radius: 10px;
}
.border-radius:after {
  border-radius: 0 0 0 10px;
}

Menambahkan Shadow Effect

Untuk Code HTMLnya seperti berikut ini

<section class="shadow">
  <h2>Folded Corner</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sunt, quidem suscipit...</p>
</section>

Dan untuk Code CSSnya seperti di bawah ini

.shadow {
  overflow: hidden;
}
.shadow:after {
  box-shadow: -1px 1px 5px #212835;
}