Вот, инспектор показывает цвет полосок прямо сразу, без наведения или других фокусов.
spoiler
Но всё таки имеет смысл использовать галку hover в devtools.
Потому что происходит интересное: если при наведении только показывать полоски и всё, то они будут и визуально серыми.
Но к картинкам применен эффект прозрачности, а это создает новый контекст наложения (гуглится) и меняется z-index => полоски попадают ПОД полупрозрачную картинку и кажется, что их цвет меняется.
Если таким образом, то видимого эффекта так же нет, к сожалению
Проверяйте подключение стилей, кэш и т.д., потому что оно не может не дать эффекта. Либо в коде есть что-то ещё, что перебивает.
Здоровый вариант:
Убрать из кода картинку, заменить на фон или псевдоэлемент. Вероятнее второе, чтобы удобнее было работать с тенью.
Нечего этой картинке делать в разметке, да ещё и с таким альтом.
А потом всё равно флексом, как написано в комментариях выше.
Для начала ответьте на вопрос, зачем тут fixed? Не мне, себе самому.
Абсолюты и фикседы ничего не знают друг о друге, поэтому именно отступа между ними вообще быть не может.
Но попробуйте вспомнить геометрию, если нужно поставить кнопку впритык к меню, а ширина меню 13vw, то очевидно, что левая позиция кнопки тоже должна быть 13vw.
Альтернативный вариант: сложить кнопку внутрь shapka (по дороге переименовав shapka в header или nav, чтобы не стыдно было) и прибить абсолютом с left 100%.
Ещё немножко нюансов:
1. В 2025 году делать кнопки инпутами с типом image даже сложно назвать извращением. Рекомендую узнать о теге button, всё заметно упростится.
2. Две кнопки тут тоже, по всей видимости, не нужны, вполне достаточно одной.
3. Пока по виду кажется, что всё это можно сделать гридами вместо фикс меню. Благо ширина колонок уже вполне хорошо анимируется без костылей.
godsplan, да, всё верно. Универсального, адаптивного некостыльного, без js и не полностью svg, решения на данный момент нет.
Что бы я делала конкретно в этом случае, написала выше. Это будет и бескостыльно и адаптивно и может зависеть от размера шрифта или размеров блока или от чего угодно (опять таки в рамках этого скрина).
Там кстати и скругления больше похожи на супер эллипс, а не просто радиус. Но можно и ошибиться без фигмы.
но можно же сделать кодпен и каждый раз его присылать.
Можно. Сделайте и присылайте.
Конкретно эту кнопку я бы делала 2 или 3 вариантом и не вижу причин почему автор вопроса не мог бы экспортировать из макета нужные svg и расставить bgi самостоятельно.
Или переформулирую для вас, а не для автора: не вижу причин, почему бы мне было интересно делать это за автора.
В целом, ответ про гугл верный. Обсуждалось уже даже не сотни раз, а тысячи только на этом ресурсе.
- clip-path подходит для любого фона
- просто svg (инлайном, как фон, маска, как псевдо..)
- кусочки фона либо псевдо с серыми (в цвет фона) детальками для однородного фона
- различные комбинации линейных и радиальных градиентов
Но я бы начала с избавления от переспама в title/alt и заодно от двойных расширений webp/img/small/5.jpg.webp