enter image description here

I just have an idea what to do through pseudo-elements by boarders, remove 2 sides ...

    2 answers 2

    For example:

    .box { width: 50px; height: 30px; line-height: 30px; text-align: center; position: relative; background: red; color: #fff; } .box:after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: -10x; width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 10px solid red; } 
     <div class="box"> <span>30%</span> </div>

      There are two options:

      1) Without using a picture: This option is better, since the smaller the pictures, the better. Just create an element, for example span, make a fix. width, blockiness. Absolute alignment. It will be the size of the discount center. And 1 pseudo-element with a triangle. Tutorial on creation: http://htmlbook.ru/blog/treugolniki-cherez-css . You make the right size and position it under the span block itself.

      2) With the image: Just make the same span under the size of the arrow and fill it with this same arrow in png. Padding th move the discount itself. Once again - I would not recommend this method. The extra weight of the site and the extra connection (if you don’t use sprites).