Градиентные бордеры на упоротый лад

Попалась мне, значит, такая нетривиальная задача – сделать кнопочки с градиентными бордерами. При первом просмотре макета ничего сложного в этом замечено не было и, дойдя до оформления кнопок, я со спокойной душой воспользовался способом с css-tricks и уже было выдохнул, но не тут то было. Заметив неладное, я взглянул на макет и понял, что есть маленькая проблема: фон секции, в которой находились кнопки, был с градиентным фоном. Если покрутить пример с css-tricks, то можно сделать огорчительный вывод: такие блоки не поддерживают прозрачный фон.

Ну что же, вызов принят! Пишем велосипед

Начал баловаться со значениями background-clip, играться с z-index и заниматься прочим бредом, заведомая зная, что так, вроде бы, не работает или не должно работать.

Встретившись взглядом с жёлтой уткой 🦆, я начал ей рассказывать о том, что я люблю, а именно про mask-image. Решил просто сделать svg маску в виде бордера и накинуть эту маску на мой псевдоэлемент для кнопки. Добавив маску на элемент и глянув на результат, стало понятно, что так легко можно отделаться только с кнопками без скругления углов. Если углы скругленные, а текста в кнопке будет много, то мы получим что-то такое:

Такой вариант, естественно, нельзя никому показывать с серьёзным лицом.

Глянув на утку снова, я решил использовать clip-path, но идея сразу пошла гулять ибо скруглить углы в clip-path в нужном виде, кажется, невозможно.

Пришлось отойти подумать и это оказалось хорошей мыслью. Решил комбинировать mask-image: картинки с градиентом, чтобы было более-менее адаптивно. Перейдём к шагам

1. Для успеха нам нужно посмотреть радиус скругления углов, после чего напрячь себя или дизайнера сделать подобную вещь:

На код такой кочерги можно посмотреть здесь: https://codepen.io/mazya/pen/VwmKJWz

Теперь напишем немного кода для нашей маски:

Полностью тут: https://codepen.io/mazya/pen/QWGbLdy

Поехали дальше. Принцип работы заключается в том, что мы делаем что-то по типу раздвижных дверей (sliding doors), комбинируя это с вертикальным градиентом.

Возьмём наши скобочки, сделанные, желательно, в векторе. В моём варианте – svg, у которого размер полотна и самого элемента равен по высоте высоте кнопки с макета, а шириной равен радиусу скругления, в этом случае 8px. Вторая является зеркальной копией первой. Толщина линии – 2px.

Две части есть, осталось сделать верх и низ. Третим свойством в mask-image является градиент. 2px первых пикселя чёрные, потом прозрачное и 2 последних пикселя чёрные. Добавляем несколько свойств: mask-size: c0ntain для рамок и calc(100% - 16px) 100% для нашего градиента. 16px взялось с двух радиусов скругления. Градиент центрируем, а рамки раскидываем по сторонам. Отключаем повтор изображения для маски и voila:

Всё тянется, всё хорошо работает. Но как же главная задача, а именно "пихнуть это на градиентный фон? А тоже сделано, ведь наш псевдоэлемент с градиентным фоном показывается только там, где маска залита чёрным цветом, а она у нас в нужной форме рамки кнопки.

Хоть картинку пихайте на фон секции:

Проблема именно этого примера в том, что кнопки получились фиксированной высоты. Чтобы изменить высоту и не поломать красоту, нужно подстраивать svg-файл маски под нужный размер кнопок. Если в вашем случае дизайнер тронутый и сделал кнопки разной высоты, что вполне реально, то выхода два: напрячь его большее количество раз либо сделать вариант, в котором вам понадобится либо 4 уголка, либо всего лишь один, но придётся побаловаться с инлайновым svg в маске.

Собственно, сурс для того, чтобы покрутить, поломать, улучшить по желанию (вполне возможно) и также похвастаться: https://codepen.io/mazya/pen/QWGbLdy