How to make this piece right?

Question

css

1. Add a picture through the background and a sharp corner on the left with indents / positioning?
2. Or just create a jpg image and add it with background?
SALE inscription how? The designer indicated that this is text, but I don’t know how to convert it like that
1. Or just create a jpg image and add it using background?
2. Add like text using opacity to make it transparent?

Answer 1

Write SALE in huge letters, put it on the paddingleft and below, then make the triangle a pseudo-element.
Example: jsfiddle.net/In4in/zsbvxere
Either put the inline element in a large block, with the text aligned to the right side.
Example: jsfiddle.net/In4in/zsbvxere/1

Answer 2

I would do something like this.
css

div.left-baloon{
    background:url('file-with-left-riece-of-baloon.png')no-repeat center;
    min-width:20px;
    min-height:200px;
    float:left;
}
div.right-baloon{
    background:#00f; /* код цвета найти не проблема */
    min-height:200px;
}
p.sale{
    opacity:0.3;
    font-size:72pt;
    font-famili:Arial;
}

HTML

<div><div class="left-baloon"/><div class="right-baloon"><p class="sale">SALE</p></div></div>