Задать вопрос
Immix
@Immix

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

7c778325e02f437cbcd42822d50fb0e1.PNG

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

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

1. Или просто создать картинку jpg и добавить с помощью background?
2. Добавить как текст с помощью opacity сделать прозрачность?
  • Вопрос задан
  • 222 просмотра
Подписаться 2 Оценить Комментировать
Решения вопроса 2
In4in
@In4in
°•× JavaScript Developer ^_^ ו°
Написать SALE огромными буквами, поставить paddingслева и снизу, далее треугольник псевдоэлементом сделать.

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

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

Пример: jsfiddle.net/In4in/zsbvxere/1
Ответ написан
Комментировать
@soledar10
html css3 js jquery
Пригласить эксперта
Ответы на вопрос 1
grigruss
@grigruss
Мне вообще плевать на ИТ, спецов и без меня хватае
Я бы сделал примерно так.
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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы