Make Badges Corner on Image

Ada satu tulisan bertuliskan preview di pojok kiri atas ketika kita melakukan postingan! Jika versi indonesia biasanya terlihat Pratinjau. Berikut cara membuat trik tersebut make preview corner atau disini jg ada loh make something in corner.
Jika itu membuat sesuatu berada di pojokan untuk tampilan pada template, sekarang bagaimana membuat hal serupa untuk menghiasi penampilan image/gambar di area postingan? Perhatikan badges warna merah pojok kiri/kanan atas pada screenshot...Lihat ada tulisan Free dan New! Itu yg akan kita buat sekarang ini ;))

.badges-area {
 width: 320px;
 height: 240px;
 position: relative;
 overflow: hidden;
 text-align: center;
 font-family: Arial, Helvetica;
 display: inline-block;
}
.badges-left {
 position: absolute;
 left: -3.7em;
 padding-top: 1px;
 height: 45px;
 width: 202px;
 font-size: 20px;
 color: #0ff;
 text-shadow: 0px 1px 0px #000;
 -webkit-transform: rotate(-40deg);
 transform: rotate(-40deg);
 background: radial-gradient(circle farthest-corner at 50% 50% , Red 25%, darkred 100%);
}
.badges-right {
 position: absolute;
 right: -3.7em;
 padding-top: 1px;
 height: 45px;
 width: 202px;
 font-size: 20px;
 color: #0ff;
 -webkit-transform: rotate(40deg);
 transform: rotate(40deg);
 text-shadow: 0px 1px 0px #000;
 background: radial-gradient(circle farthest-corner at 50% 50% , Red 25%, darkred 100%);
}
.badges-text {
 border: 0;
 padding-top: 9px;
}

Hal-hal yg mesti diperhatikan:
>> Rubahlah tinggi/lebar sesuai kebutuhan. Karena ini akan mempengaruhi pada posisi badges!
>> Fix atribut CSS3 pada generator yg ada Ex: transform
>> Fix kode background di gradient generator
Markup HTML

<div class="badges-area">
<div class="badges-left">
<div class="badges-text">BLAH BLEH</div>
</div>
<img src="URL IMAGE HERE" alt="" />
</div>

Resource: www.webstuffshare.com/2010/04/photoshop-effect-vs-css3-properties
Happy blogging \m/