Как правильно верстать этот кусок?

Question

[Immix]

1. Картинкой через background и острый уголок слева добавить отступами/позиционированием?
2. Или просто создать картинку jpg и добавить с помощью background?

Надпись SALE как? Дизайнер указал что это текст, но я не знаю как его так преобразовать

1. Или просто создать картинку jpg и добавить с помощью background?
2. Добавить как текст с помощью opacity сделать прозрачность?

Answer 1

[Виталий Инчин ☢]

Написать SALE огромными буквами, поставить paddingслева и снизу, далее треугольник псевдоэлементом сделать.

Пример: jsfiddle.net/In4in/zsbvxere

Либо поместить строчный элемент в большой блок, с выравниванием текста по правой стороне.

Пример: jsfiddle.net/In4in/zsbvxere/1

Answer 2

[Дмитрий]

может так ? - jsfiddle.net/soledar10/589z65o3

Comments

[Immix]

Только зачем это?
width: 0;
height: 0;
и так работает

Answer 3

[Григорий]

Я бы сделал примерно так.
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>

Comments

[Immix]

www.cssdesk.com/PTNjh

[Григорий]

Евгений: здесь не готовый код, а пример. ссылка на картинку не существует. И код цвета не подобран. Лучший вариант, кстати, у Дмитрий и Виталий Инчин ☢. У меня не очень богатый опыт в CSS.