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

Question

[Valetorn]

Верстаю страницу по макету и тут натыкаюсь на блок (смотри на картинке), с которым возникли проблемы. 1. Проблема: Как сделать фон у кнопок гибким, т.е. чтобы не приходилось задавать ширину, высоту и другие параметры для каждой кнопки в отдельности? Хотелось бы сверстать так, чтобы в дальнейшем добавить блок с текстом и фон встал как нужно, без дополнительной подгонки (если это вообще возможно). 2. Проблема: Как расположить блоки согласно макету, при том, что они имеют разную длину?
Прилагаю скрин, интересующая область выделена красным:

Comments

[Михаил Рябинин]

Может этот блок, который выделен красным - сделать display: flex; А внутренние элементы расположить c автоматическим промежутком между друг другом justify-content: space-between;

Ну, т.е.
красный блок - .tags{display: flex; justify-content: space-between; flex-direction: row;} ,
а элементы .tags__item{ //какой-то код }

Если неправильно Вас понял и что-то нагородил, то простите.

[Valetorn]

Михаил Рябинин: Вы все правильно поняли, спасибо. Но, к сожалению, добавить родителю space-between не работает, как нужно. Гораздо лучше сработало задать родителю flex-start, а дочерним элементам flex-basis и margin-right. Для наглядности, если интересно - pastebin.com/4nTC545e

Answer 1

[iBird Rose]

1) у кнопок в фш отрезаешь левую часть и ставишь ее через before. остальную часть кнопки заливаешь тем же градиентом, справа сделав border-radius (если боишься что градиенты не совпадут - у картинки вырежи полоску шириной 1px и бэкграундом ее задай через repat-x)
2) сами кнопки распологай через display: inline-blok; и получишь то что хоешь. без задания ширины.

Comments

[Евгений Кузовлев]

2) Только учитывайте, что кнопки будут не совсем как в макете prntscr.com/dpp5p2

[iBird Rose]

Евгений Кузовлев: ты думаешь он маргины сам поставить не сможет?

[Евгений Кузовлев]

iBird Rose: по макету, метки нарисованы в 3 столбца, с inline-block метка "xml" будет левее, чем метка "php", просто обратил на это внимание. А маргины здесь причем?

Answer 2

[Valetorn]

Всем спасибо за ответы. Идея с тем, чтобы вырезать и вставить часть от картинки и вставить псевдоэлементом, очень помогла. Для выравнивания блоков как в макете пришлось немного мудрить. Прилагаю html и css код, может пригодится кому.

Answer 3

[rinatoptimus]

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