CodePen

HTML

            
              <div class="product">

     <div class="promotion">
        <em><strong>25%</strong><br />off</em>
     </div>

     <div class="promotion p2">
        <em><strong>2%</strong><br />off</em>
     </div>
  
     <div class="promotion p3">
        <em><strong>2%</strong></em>
     </div>

     <div class="promotion p4">
        <em><strong>Discounted</strong></em>
     </div>
  

  </div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .product
   position: relative
   text-align: center

.promotion
   position: absolute
   top: 5px
   display: block
   padding: 1.5% 1.8% 
   -moz-border-radius: 50%
   -webkit-border-radius: 50%
   border-radius: 50%
   background: red

em, strong 
   color: white
   font-size: 1.3em

.p2 
   left: 250px

.p3 
   left: 500px

.p4 
   left: 750px
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................