Как сверстать картинки в данной странице?

Question

[Norwood]

Подскажите, пожалуйста как лучше сверстать картинки? Не знаю, звезду сделать через background + текст или же одной картинкой?
Тоже самое и блок с цифрой + картинка + заливка. Как их лучше сделать? Цифру через псевдоэлемент , а картинку с заливкой одним блоком? Вариантов много, можете подсказать наиболее оптимальный?

Comments

[Ankhena]

Подскажите, пожалуйста как лучше сверстать картинки? Не знаю, звезду сделать через background + текст или же одной картинкой?

50 копеек это цена или украшение? (Это ответ)

Тоже самое и блок с цифрой + картинка + заливка. Как их лучше сделать? Цифру через псевдоэлемент

Если номера важны, то это ol со скрытыми родными номерами и счетчиком в псевдоэлементах.

, а картинку с заливкой одним блоком?

Зависит от того, как вы собрались адаптировать этот блок.

p.s. где вы откопали такой дизайн прошлого века?
Заливку можно сделать градиентом.
Картинку фоном или псевдо, как хотите. Но не img. Либо img, но с aria-hidden.

Answer 1

[Noder SS]

Сверстать - никак. Текст на картинку и все

Comments

[Norwood]

это вы про какую картинку? Про цену или про второй блок?

[Noder SS]

Norwood, Это про первый. Что насчет второго - объеденяете в блоке картинку и блок с текстом и заливкой

[Norwood]

а цифру и картинку с коробками background"ом сделать?

[Noder SS]

Norwood, про картинку с коробкой говорил, картинка и блок, могу сверстать. А цифра - просто текст

Answer 2

[Максим]

Рисуем в svg и вставляем куда надо на страницу

Хотя можно и проще, сделать на клонировании всего одного path