Mys2010 on Codepen

Memasang kode Card UI Design Untuk menerapkan kode tersebut Langkah awal
Login ke akun blog klik tombol blog baru   buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

@import url(http://fonts.googleapis.com/css?family=Rosario:400,700); 

body{
  background: grey;
}

.folded_corner{
  position:relative;
  width:210px;
  margin:4vh auto;
  padding:40px;
  color:#fff;
  font: 20px'Rosario', sans-serif;
  background: #58a;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
    linear-gradient(-135deg, transparent 1.5em, #58a 0);
  
  -webkit-filter: drop-shadow(20px 30px rgba(0,0,0,0.1));
  filter: drop-shadow(20px 30px rgba(0,0,0,0.1));
}
.folded_corner::before{
  content: ' ';
  position:absolute;
  top:2em; 
  right:0;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,0.1) 0) 100% 0 no-repeat;
  width: 2em;
  height:2em;
  transform: rotate(180deg)
}

<div class="folded_corner">
  <p>Your Text or Link Image.</p>
</div>

/* inspired by:
  CSS secret 19: play.csssecrets.io/folded-corner 
  &
  CSS secret 16: play.sccsecrets.io/drop-shadow  
  
*/

Penjelasan :
Edit code warna tambahkan teks atau gunakan link gambar sesuai kinginan

Edited by. Myscript2010
Sources by.   Sandra Robotos on Codepen

DEMOSHOW