2

помогите понять как правильно сверстать изогнутые переходы между экранами, с учетом того что вверху слайдер (движется только то что на синем фоне) и так же есть изогнутые линии переходящие из первого экрана во второйскриншот макета

1
  • Раньше сам не знал как делаются такие фоны, мне тогда помогла вот эта статья - css-tricks.com/creating-non-rectangular-headers . Можно еще погуглить skewed css background
    – E H
    19 июл 2019 в 10:11

5 ответов 5

3

Такой вариант с svg:

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

div {
  height: 500px;
}

.s-1 {
  background: url(https://images.unsplash.com/photo-1468233748640-b31327627610?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.s-2 {
  position: relative;
  margin: -4rem 0;
  padding: 4rem 0;
  text-align: center;
}

.s-2 svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
}

.inner {
  position: relative;
  z-index: 3;
  padding: 4rem;
}

.s-3 {
  background: #f1f4fe;
}
<div class="s-1">

</div>
<div class="s-2">
  <svg preserveAspectRatio="none" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M500 0C300 80 85 35 0 0V500C182 418 410 465 500 500V0Z" fill="#fbfaff"/>
    </svg>

  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, praesentium, deleniti. Iusto minus quos expedita maxime libero laudantium quas ut?
  </div>
</div>
<div class="s-3">

</div>

2
3

Или SVG

html,
body {
  margin: 0;
}
<svg viewBox="0 0 600 300">
  <path d="M0,0 600,0 L600,250 Q300,300 0,250Z" fill="red"/>
</svg>

2

Поможет border-radius с разными радиусами закругления по ширине и высоте, хотя можно взять и сверстать это на svg как советуют в соседнем ответе

section:nth-child(2n+1) {
  background-color:wheat;
  border-radius: 50% / 10% ;
}

section {
  height:120vh;
  margin-top:-20vh;
}

body {
  margin:0;
}
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

2

Это делается несколькими svg.

.firstScreen, .firstScreen__bottom {
  background-color: #6823c1;
  color: white;
}  

.firstScreen__bottom svg {
  display: block;
}
<section class="firstScreen">
  Some content...<br>
  Some content...<br>
  Some content...<br>
</section>
<div class="firstScreen__bottom">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1360 358">
    <path fill="#ffffff" d="M-1,858V500C34.869,658.508,183.691,696.045,314,698c151.8,0,304.764-93.819,461-77,266.02,28.636,313.87,229.511,503,225,47.92-1.143,82-9,82-9v21H-1Z" transform="translate(0 -500)" />
  </svg>
</div>
<div>
  Some other content.
</div>

2
  • 6
    День добрый, постарайтесь более подробно расписать ответ. Хотя бы краткую выжимку (: 16 июл 2019 в 12:52
  • 1. На svg делать белый оверлей когда можно сделать саму волну - это какое-то извращение. 2. Тебе правка вместо твоего костыля margin-bottom: -1px;. 3. Не надо постить ссылки на свои сайты в качестве ответов.
    – Qwertiy
    16 июл 2019 в 13:19
0

Тоже на css но более точно выглядит

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

.item {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.item:after {
  content: "";
  display: block;
  width: 100%;
  height: 50vh;
  position: absolute;
  top: 0;
  left: 0;
  background: tomato;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  transform: scale(2.9);
}
<div class="item"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.