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

Question

[acid_haker]

Подскажите как сверстать такой переход между секциями + прозрачность для карты

Comments

[Stanislav]

Скинь ссылку на сайт, погляжу.

[acid_haker]

Это предварительный макет

Answer 1

[igumenov]

Делаются белые подложки на всю ширину экрана, а по средине нужная прозрачная форма. Потом через position absolute налаживается

Comments

[Игорь]

А можно пример простенький? Я не очень понял(

Answer 2

[dom1n1k]

Ну это только делать карту физически больше с двух сторон и накрывать плашками соответствующих цветов с вырезами (делаются картинками) через z-index. Костыль, неудобно и всё такое - но иначе никак. Дизайнер, рисуя свой шэдэвор, не знал как это потому будет реализовываться.
Либо поговорить с дизайнром/заказчиком и попытаться найти компромисс, сделав например эти кнопки не прозрачными, а залить каким-то цветом.

Comments

[Nwton]

это даже не кнопки, а просто "переход" между блоками инфы. С точки зрения дизайна - убого. Хотя для карты уместно, если бы её можно было смещать.

[Виктор Янышев]

Можно в центре clip-path и svg с маской или канвас

[dom1n1k]

Виктор Янышев: Внимание, вопрос: какой смысл в этих усложнениях? Ну, кроме того, что это модные buzzwords.

[Виктор Янышев]

dom1n1k: А вы консерватор, однако. Ответ в в том, что это также ср-во для рез-та и всяк лучше фразочки "Костыль"

[dom1n1k]

Виктор Янышев: Не-не, это общие слова, а должна быть конкретика.
Ведь сделать кроссбраузерный clip-path или нарисовать волнистый контур на canvas - гораздо более трудоемко, чем засунуть картинку в background-image.
Чтобы оправдать усложнение, альтернативный вариант должен иметь какие-то конкретные преимущества. Какие? Хоть одно.

[Виктор Янышев]

dom1n1k: Я полагаю, Вы и без меня прекрасно знаете, от чего будет зависеть то, какие способы решения задачи и что их может ограничить кол-во этих способов.

[dom1n1k]

Виктор Янышев: с таким талантом уходить от ответа надо идти в политику или хотя бы менеджеры.

Answer 3

[Антон Шелестов]

<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%;

Аналогично для других

Answer 4

[Николай]

codepen.io/Nickolyashka/pen/aJppRR

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

Comments

[Игорь]

Спасибо

[Сергей Горячев]

Игорь: Вместо Спасибо можно просто нажать кнопку Отметить решением.

[Игорь]

Sergey Goryachev: не я вопрос задавал, я не могу отмечать решением.