Как сделать переход между секциями на сайте как на картинке?

Question

[Вячеслав Яшников]

Добрый день, подскажите, как правильно сделать такой переход между секциями на сайте?

Answer 1

[Дмитрий Антонов]

Самый простой способ после основного блока с фоном добавить блок с твоей окантовкой. можно через псевдо класс

Comments

[Вячеслав Яшников]

Можно подробнее?

[Дмитрий Антонов]

Смотри у тебя сверху фон изображение - это 1 блок дальше идет окантовка в неё входит (белый фон зигзаго образное изображение и тень) - это 2 блок вот берешь в фотошопе и вырезаешь все это и сохраняешь в png24 и 3 блок это белый фон. Так вот берешь к примеру к 1 блоку делаешь псевдо класс :after и ставишь значения сontent =""; display: block; position: absolute; bottom: 0px; background: наша а кантовка. И для 1 блока position: relative;

Либо после 1 блока ставишь второй блок и в него вставляешь нашу окантовку и отрицательным margin-top: -20px к примеру чтобы положить выше нашего фона нашу окантовку. Так проще всего

[Дмитрий Антонов]

ток content: "";

[Вячеслав Яшников]

codepen.io/anon/pen/JYXgEe

Answer 2

[RaulDuke]

Сформулируйте немного точнее, о каком переходе речь? и в чем именно заключается вопрос?codepen.io/cvtk/pen/KdzjYg

Comments

[Вячеслав Яшников]

Сверху есть секция у нее фон тот что сверху, после нее идет секция с белым фоном, но верх у этой секции закруглен так как на картинке

Answer 3

[Дмитрий]

Либо border-radius, либо png прозрачный. Либо вообще одной картинкой jpeg на фоне