@LorDDrouS
Учусь создавать android приложения

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

Всем привет, хочу сверстать для опыта вот такой блок, но с css пока опыта мало, может кто-нибудь может помочь? чтобы дальше я мог делать более прикольные вещи, прилагаю код, который сам написал
a462edbff02c4fd09746b67fd5a28d65.pngea26f072c8c943efaec746d3a11549b2.png
  • Вопрос задан
  • 203 просмотра
Решения вопроса 1
В приведённом примере самый сложный момент – обрезание внутренним краем цифры «0» красной плашки для рублей, которая правее перекрывает ту же цифру. Этот же эффект с другой цифрой, например, «5», не сработает. Поэтому это дизайн, картинка, а не вёрстка.

Можно сделать через две перекрывающиеся плашки:
  1. короткую, под первой цифрой «0», которая заканчивается точно под цифрой, не вылезая левее (в этом месте наиболее вероятно ошибиться и накосячить).
  2. длинную, которая начинается где-то с середины первого нуля поверх первой плашки, точно той же высоты, и идет поверх нулей далеко направо.

Ну и поверх неё текст «рублей».

Надёжнее и качественнее всего делать это как картинку. Растровую, или лучше векторную в SVG. Причём цифры не текстом, а кривыми.

Вёрсткой с абсолютным позиционированием, указанием line-height и, в идеале, подгрузкой шрифта – тоже решается, но есть риск, что где-то что-то съедет.
3a59adc6926b4cd7be63e02bf799afaf.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
гугли "абсолютное позиционирование"
Ответ написан
userAlexander
@userAlexander
Верстка наше все)
Lord Drous если делать на css, будет костыль
возможно есть смысл смотреть в сторону картинки
Ответ написан
@Za0r
pop()
@kulaeff
Front-end developer
Автор вопроса говорит, что хочет сверстать этот блок для опыта, а значит к черту рассуждения о том, что цифра может поменяться и придется все переделывать. Таким образом, сверстать этот блок довольно легко. Сергей Соколов уже обрисовал в общих чертах решение, а я облек это все в код.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы