Как сделать такие табы?

Народ, нашел в инсте интересный UI. Пробовал реализовать такое, но не в верстке не на столько силен. Может кто подскажет или покажет как сделать такое, интересует именно фон
Буду очень благодарен
Изображение

5f43662302317505690330.jpeg
  • Вопрос задан
  • 892 просмотра
Пригласить эксперта
Ответы на вопрос 4
sniggering_deus
@sniggering_deus Куратор тега CSS
Dance Gavin Dance - Prisoner
Такого эффекта для табов можно добиться с помощью clip-path или SVG. Еще можно поиграть с псевдоэлементами, возможно и получится сделать, но точно не уверен. Ещё как вариант использовать градиенты, но и тут гарантии успеха мало. Я бы конечно сделал с clip-path или SVG, выйдет гораздо дешевле и аккуратнее.

Вот собственно говоря небольшой пример (прокрутите вниз, вариант №10) табов и с использованием SVG.
Ответ написан
@Hikky
Про табы можешь видео посмотреть, у того же Жеки например)
Ответ написан
Benzin102
@Benzin102
Shitcoder
Сами кнопки повесь на абсолют поверх контента табов и у активного делай фон transparent. А на счёт скругления и пр. это или с svg морочиться или clip-path насиловать
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Скругления делаются псевдоэлементами вообще без проблем.
Это было для другого вопроса, но сути не меняет https://jsfiddle.net/Ankhena/6yp43bg2/

Панельку с "кнопками" делаете абсолютом поверх блока с контентом. Блоку с контентом соответствующий отступ.
Ответ написан
Ваш ответ на вопрос

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

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