<div class="urun"> <img src="http://www.placehold.it/280x170" alt="www.anarsamadov.net"> <div class="kurdele-alani"> <div class="kurdele">%5 İndirim</div> </div> </div>
.urun { margin: 50px auto; width: 280px; height: 170px; background: #DDD; -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); position: relative; z-index: 90; } .kurdele-alani { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } .kurdele { font: bold 13px Sans-Serif; color: #000; text-align: center; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); } .kurdele:before, .kurdele:after { content:""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } .kurdele:before { left: 0; } .kurdele:after { right: 0; }