И еще как сделать градиент не на всю ширину, а на 70-75% как на картинке?
У градиента точки перехода цвета ставятся в любом месте, в том числе и на 75%.
Для четкой линии у двух цветов ставите одинаковое значение. Если градиент под углом, то с небольшой разницей для гладкости.
sergey90123, разумеется, один инпут будет переключать один слайд. Причем, еще надо что-то делать с обратным направлением листания :)
Главное, учтите, что обычно верстальщику неизвестно сколько слайдов будет в слайдере.
Я бы делала так:
По низу clip-path
По верху - абсолютом, для меню белый фон с псевдо нужной формы (svg или градиентами или тот же clip-path).
Или даже лучше не абсолютом, а в потоке.
Значит, тот блок, в котором расположено меню, нужно сделать шире. Если вы все равно скрываете полосу прокрутки.
Альтернативы:
- Делать подменю не в сторону, а вниз.
- Не ограничивать высоту.
- Позвать нормального дизайнера, умеющего думать на 2 шага вперед и предусматривать разные размеры меню, экранов и т.д.
1. Не задавайте подобных ограничений для body. Используйте контейнер и ему задавайте что угодно.
2. Чтобы fixed выравнивался визуально по краю такого контейнера задавайте ему left с помощью calc. Удобнее считать от середины. calc(50% - 800px)
У градиента точки перехода цвета ставятся в любом месте, в том числе и на 75%.
Для четкой линии у двух цветов ставите одинаковое значение. Если градиент под углом, то с небольшой разницей для гладкости.
Либо через bg size.