Decorate HTML PRE Tag with Style Paper Edge Effect

Berbicara mengenai HTML pre tag memang sedikit unik. Karena tanpa embel-embel gaya CSS saja sudah terlihat keunikannya! Tagging pre akan menampilkan script/coded saat kita mau memposting apa adanya. Jadi kita tinggal membubuhi gaya dengan sesuai kebutuhan dan selera ;) Sudah merupakan aturan main taging <pre> </pre> diguanakan dalam menuliskan kode!
Berikut ini beberapa artikel tut's tentang tag HTML pre:

1. Make Code Preview on Post Area pre & code
2. Hover Trick on pre Attribute
3. Coolest Hover Style for PRE and ABBR Tag

Sekarang AA Koben mau berbagi bagaimana caranya membuat tagging pre menjadi lebih indah dengan memberikan sentuhan efek paper (lipatan kertas) Tapi lipatan yg dibuat berada disisi yah (Paper edge effect)
DEMO

div {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #ddd;
background-size: cover;
background-clip: content-box;
background-color: #f66f6f;
box-sizing: border-box;
position: relative;
margin: auto;
}

.paper-edge {
width: 17em;
height: 200px;
padding: 10px;
border: 1px solid #777;
background-size: cover;
background-clip: content-box;
background-color: #F6F4F0;
box-sizing: border-box;
position: relative;
margin: 15px auto;
color: #333;
white-space: pre-line;
}
.paper-edge:after {
content: "";
display: block;
position: absolute;
border: 50px solid transparent;
border-bottom: 50px solid #fff;
bottom: -60px;
right: -65px;
box-shadow: 0px 7px 6px -9px black;
transform: rotate(135deg);
}
.paper-edge:before {
content: "";
display: block;
position: absolute;
border: 50px solid transparent;
border-top: 50px solid #fff;
top: -60px;
left: -65px;
box-shadow: 0px -7px 6px -9px black;
transform: rotate(135deg);
}
.paper-edge p {
margin: 10px;
height: 185px;
overflow: hidden;
text-indent: 15px;
}
.paper-edge p:hover {
overflow-y: auto;
}

Aturlah tinggi, lebar, padding & margin sesuai kebutuhan. Perhatikan pada variabel kode border-bottom: 50px solid #fff; and border-top: 50px solid #fff; Gantikan kode warna sesuai dengan background tempalte kalian. Karena kalau tidak sama warna kode tersebut dengan warna latar belakang akan kelihatan juelek :D
Markup HTML<div class="paper-edge"><p>BLAH BLEH BLOH {

----------- ADD CODED AFTER PHRASE HERE -----------

}</p></div>Selesai deh membuat membuat tag HTML pre dengan gaya paper edge effect.
Semoga bermanfaat :)
Resource by: http://cdpn.io/AyueF
BONUS links...
code-snippet-blog.dennispollack.de - cdpn.io/fDFce - cdpn.io/qmIdx - cdpn.io/AFsKB