Как сверстать такие переходы между секциями?

@Rubbish · Регистрация: 13.06.2008

Author24 — интернет-сервис помощи студентам

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

[del]

Было бы вообще замечательно, если бы у кого-то под рукой был урок на эту тему.
Я, блин, даже не знаю как правильно сформулировать запрос в поисковике...

@aj17 · 25.04.2017, 16:58

Я думаю есть смысл попробовать реализовать "хотелку" дизайнера с помощью svg масок

@isit · 25.04.2017, 23:57

А если поступить таким образом: подтягивать следующий блок с помощью отрицательного margin-а. Затем у предыдущего блока создать div с border-radius-ом.

@mrtoxas · 26.04.2017, 00:20

isit, а с фоновым изображением что делать?

@isit · 26.04.2017, 00:30

mrtoxas, приходит на ум не самое хорошее решение, но оно без SVG)

Создать в абсолютном позиционировании элемент :after и там задать еще раз тоже самое фоновое изображение, но только для псевдокласса указать overflow:hidden;.

@aj17 · 26.04.2017, 13:36

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

Добавлено через 2 минуты
И если Вас не затруднит не зависимо от способа реализации, приложите сюда пример как Вы решили этот вопрос) Возможно кому-то поможет...

@Rubbish · 26.04.2017, 18:37 **[ТС]**

Уже и не думал, что в теме ответят. С СВГ я к сожалению не знаком, а тем более с масками. Для меня это звучит, как что-то страшное.

И если Вас не затруднит не зависимо от способа реализации, приложите сюда пример как Вы решили этот вопрос) Возможно кому-то поможет...

Дело в том, что я отказался от заказа. Не люблю подставлять людей, поэтому не беру в работу то, что не уверен что выполню. (как-то не по-русски написал предложение

)

@aj17 · 26.04.2017, 18:59

SVG - это та же разметка, только поддерживает разные "вкусности", ничего сложного там нету, но пользы может принести много) Так что глаза бояться, а руки делают. Все получиться)!

@Патрон · 26.04.2017, 23:29

картинку продублировать псевдоэлементом, изменяя выдвинутый полуэллипс бордер-радиусом \ в самой секции обрезать бэкграунд на значене нижнего паддинга и затянуть нижний блок на это же значение.

пример в песочнице
https://codepen.io/anon/pen/GmrZxg

HTML5

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <section class="section first" style="background-image: url('https://pixambo.s3.eu-central-1.amazonaws.com/20160419/pixambo-architecture00152_5716405ac1db1_medium.jpg');"></section>
  <section class="section second" style="background-image: url('https://pixambo.s3.eu-central-1.amazonaws.com/20160419/pixambo-architecture00140_5716402a7d778_medium.jpg');"></section>
</body>
</html>

CSS

.section{
  min-height: 400px;
  width: 100%;
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  z-index: 1;
}
 
.section.first{
  z-index: 2;
  background-clip: content-box;
  padding-bottom: 50px;
  margin: 0 0 -50px;
}
 
.section.first:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 0 0 40% 40%;
  overflow: hidden;
  background: url('https://pixambo.s3.eu-central-1.amazonaws.com/20160419/pixambo-architecture00152_5716405ac1db1_medium.jpg');
  background-size: cover;
  background-position: 50% 50%;
  z-index: 2;
}

@Rubbish · 27.04.2017, 11:53 **[ТС]**

Патрон, отличное решение, спасибо большое.
Но как быть, если нужная нам фигура не полуовал, а, например, треугольник или трапеция? Такое тоже часто встречается

@Rubbish 0 / 0 / 0 Регистрация: 13.06.2008 Сообщений: 18
		1
	Как сверстать такие переходы между секциями? 24.04.2017, 14:44. Показов 9809. Ответов 9 Метки нет (Все метки) Добрый день. Интересует вопрос, как сверстать вот такие неровные переходы между секциями? [del] Было бы вообще замечательно, если бы у кого-то под рукой был урок на эту тему. Я, блин, даже не знаю как правильно сформулировать запрос в поисковике... Миниатюры 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	25.04.2017, 16:58	2
	Я думаю есть смысл попробовать реализовать "хотелку" дизайнера с помощью svg масок 0

@isit 0 / 0 / 3 Регистрация: 25.04.2017 Сообщений: 10
	25.04.2017, 23:57	3
	А если поступить таким образом: подтягивать следующий блок с помощью отрицательного margin-а. Затем у предыдущего блока создать div с border-radius-ом. 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.04.2017, 00:20	4
	isit, а с фоновым изображением что делать? 0

@isit 0 / 0 / 3 Регистрация: 25.04.2017 Сообщений: 10
	26.04.2017, 00:30	5
	mrtoxas, приходит на ум не самое хорошее решение, но оно без SVG) Создать в абсолютном позиционировании элемент `:after` и там задать еще раз тоже самое фоновое изображение, но только для псевдокласса указать `overflow:hidden;`. 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	26.04.2017, 13:36	6
	Вся суть в том, что Вам придется руками нарезать, подгонять фоновые изображения, логично сделать так, что бы при необходимости можно было легко ставить любые картинки на фон и они вставали без проблем...Вот для чего и нужна маска, или что-то подобное. Добавлено через 2 минуты И если Вас не затруднит не зависимо от способа реализации, приложите сюда пример как Вы решили этот вопрос) Возможно кому-то поможет... 0

@Rubbish 0 / 0 / 0 Регистрация: 13.06.2008 Сообщений: 18
	26.04.2017, 18:37 [ТС]	7
	Уже и не думал, что в теме ответят. С СВГ я к сожалению не знаком, а тем более с масками. Для меня это звучит, как что-то страшное. И если Вас не затруднит не зависимо от способа реализации, приложите сюда пример как Вы решили этот вопрос) Возможно кому-то поможет... Дело в том, что я отказался от заказа. Не люблю подставлять людей, поэтому не беру в работу то, что не уверен что выполню. (как-то не по-русски написал предложение ) 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	26.04.2017, 18:59	8
	SVG - это та же разметка, только поддерживает разные "вкусности", ничего сложного там нету, но пользы может принести много) Так что глаза бояться, а руки делают. Все получиться)! 0

@Rubbish 0 / 0 / 0 Регистрация: 13.06.2008 Сообщений: 18
	27.04.2017, 11:53 [ТС]	10
	Патрон, отличное решение, спасибо большое. Но как быть, если нужная нам фигура не полуовал, а, например, треугольник или трапеция? Такое тоже часто встречается 0

Как сверстать такие переходы между секциями?

Решение