@acid_haker

Как такое сверстать?

Подскажите как сверстать такой переход между секциями + прозрачность для карты
88d201797c9d4d0e85f4b9375d2e3c72.jpgbbc57fae9a5a4165aebde736a0715a64.jpg
  • Вопрос задан
  • 522 просмотра
Пригласить эксперта
Ответы на вопрос 4
@igumenov
Делаются белые подложки на всю ширину экрана, а по средине нужная прозрачная форма. Потом через position absolute налаживается
Ответ написан
dom1n1k
@dom1n1k
Ну это только делать карту физически больше с двух сторон и накрывать плашками соответствующих цветов с вырезами (делаются картинками) через z-index. Костыль, неудобно и всё такое - но иначе никак. Дизайнер, рисуя свой шэдэвор, не знал как это потому будет реализовываться.
Либо поговорить с дизайнром/заказчиком и попытаться найти компромисс, сделав например эти кнопки не прозрачными, а залить каким-то цветом.
Ответ написан
ShelestovAnt
@ShelestovAnt
Верстаю и программирую
<div class="bg-block">
     ...
     <div class="bottom-bg"></div>
</div>

Для .bg-block задается фон основного изображения + css position:relative
Для .bottom-bg задается фон белой полоски с прозрачностью по середине и стрелкой (это я про первый скрин) и через css position:absolute выравнивается в низу родительского блока bottom:0;left:0;width:100%;

Аналогично для других
Ответ написан
Комментировать
nickolyashka
@nickolyashka
codepen.io/Nickolyashka/pen/aJppRR

Реализация на скорую руку. В идеале я бы сделал выделенные части + блок со цветом на svg/clip-path. Стрелку бы убрал в ссылку.
Ответ написан
Ваш ответ на вопрос

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

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