@Valetorn
Начинающий frontend разработчик

Как сделать гибкий фон для кнопок и расположить их согласно макету?

Верстаю страницу по макету и тут натыкаюсь на блок (смотри на картинке), с которым возникли проблемы. 1. Проблема: Как сделать фон у кнопок гибким, т.е. чтобы не приходилось задавать ширину, высоту и другие параметры для каждой кнопки в отдельности? Хотелось бы сверстать так, чтобы в дальнейшем добавить блок с текстом и фон встал как нужно, без дополнительной подгонки (если это вообще возможно). 2. Проблема: Как расположить блоки согласно макету, при том, что они имеют разную длину?
Прилагаю скрин, интересующая область выделена красным: fa58a85805b8416eae0bf88f43b6b851.png
  • Вопрос задан
  • 308 просмотров
Решения вопроса 3
iiiBird
@iiiBird Куратор тега Вёрстка
Пока ты спишь - твой конкурент совершенствуется
1) у кнопок в фш отрезаешь левую часть и ставишь ее через before. остальную часть кнопки заливаешь тем же градиентом, справа сделав border-radius (если боишься что градиенты не совпадут - у картинки вырежи полоску шириной 1px и бэкграундом ее задай через repat-x)
2) сами кнопки распологай через display: inline-blok; и получишь то что хоешь. без задания ширины.
Ответ написан
gzhegow
@gzhegow
aka "ОбнимиБизнесмена"
1) Кнопку делаешь inline-block
2) левую часть с треугольником отрезаешь в виде картинки и вешаешь через :after {}
3) если хочется чтобы они выстраивались в столбик - создаешь еще один инлайн блок и поскольку он у тебя прижат верхней стороной - пишешь ему vertical-align: top;
4) задаешь максимальную ширину блоку, чтобы при переполнении он не перепрыгнул на новую строчку а расширялся вниз

все
Ответ написан
Комментировать
@Valetorn Автор вопроса
Начинающий frontend разработчик
Всем спасибо за ответы. Идея с тем, чтобы вырезать и вставить часть от картинки и вставить псевдоэлементом, очень помогла. Для выравнивания блоков как в макете пришлось немного мудрить. Прилагаю html и css код, может пригодится кому.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@rinatoptimus
Ответов будет больше, если есть ссылка на начатый вами пример.
Ответ написан
Ваш ответ на вопрос

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

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