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

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

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

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

[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
1
2
3
4
5
6
7
8
9
10
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

@Rubbish 0 / 0 / 0 Регистрация: 13.06.2008 Сообщений: 18

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

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

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

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

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

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

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

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

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

Решение