Как правильно верстать этот кусок?
Написать SALE огромными буквами, поставить paddingслева и снизу, далее треугольник псевдоэлементом сделать.
Пример: jsfiddle.net/In4in/zsbvxere
Либо поместить строчный элемент в большой блок, с выравниванием текста по правой стороне.
Пример: jsfiddle.net/In4in/zsbvxere/1
Я бы сделал примерно так.
CSSdiv.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>