Ecommerce product block ribbon with css

HTML Part

<div class="block">
<div class="tiled_arrow">
<span class="onsale">sale !</span>
</div>
<h2>CSS Zilla</h2>
</div>

CSS Part

.block { width:200px; float:left; height:200px; background:#333; position:relative; margin:50px; text-align:center; color:#fff; font-size:15px; font-family:Arial, Helvetica, sans-serif;}
.tiled_arrow { position:absolute; overflow:hidden; right:-6px; top:-6px; white-space:nowrap; width:100px; height:100px;}
.tiled_arrow:before { border-bottom-color:rgb(201, 167, 115) !important; border:8px solid rgba(0, 0, 0, 0); content:""; position:absolute; left:15px; top:-10px;}
.tiled_arrow:after { border-bottom-color:rgb(201, 167, 115) !important; border:8px solid rgba(0, 0, 0, 0); content:""; position:absolute; top:70px; right:-10px; transform:rotate(90deg);}
.onsale {background-image: none; border-radius: 0; box-shadow: none; font-weight: normal; left: auto; line-height:25px; min-height: 0; padding:0 80px; right: -72px; text-shadow: none; text-transform: uppercase; top: 15px; transform: rotate(45deg); z-index: 2; background:#C90; position:absolute;}

DEMO Part

sale !

CSS Zilla