در این آموزش می توانید به راحتی یک روبان (Ribbon) ساده مشابه تصویر زیر در هر قسمت از سایت خود روی تصویر موردنظر با کدهای html و css  قرار دهید. 

 


 

کدهایی که باید در html  قرار بگیرد: 
این ribbon می تواند روی هر باکسی قرار بگیرد ولی در این آموزش من روی عکس گذاشتم.
<"img src="images/151128474951.png" alt="" height="365" width="370>
  <"h2 class="ribbon>
</br</span>>تخفیف
به صورت محدود
 <h2/>
حالا باید در css کلاس ribbon را تعریف کرد تا روبان (ribbon) روی تصویر قرار بگیرد می توانید به جای تگ h2 از تگ های متنی دیگر هم استفاده کنید.
کدهای css
 
 
}ribbon.
;display: block
;background: #f04040
;height: 64px
;width: 250px
;text-align: center
;position: absolute
;top: 14px
;left: -62px
;border: 1px solid #f04040
;color: #fff
;text-decoration: none
;font-size: 1.6rem
;(transform: rotate(-45deg
{
می توانید اعداد top، left، width و height را با توجه به تصویری که ribbon رویش قرار می گیرد، تغییر دهید.