помогите понять как правильно сверстать изогнутые переходы между экранами, с учетом того что вверху слайдер (движется только то что на синем фоне) и так же есть изогнутые линии переходящие из первого экрана во второй
-
Раньше сам не знал как делаются такие фоны, мне тогда помогла вот эта статья - css-tricks.com/creating-non-rectangular-headers . Можно еще погуглить skewed css background– E H19 июл 2019 в 10:11
Добавить комментарий
|
5 ответов
Такой вариант с 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>
Или 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>
Поможет 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>
Это делается несколькими 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>
-
6День добрый, постарайтесь более подробно расписать ответ. Хотя бы краткую выжимку (: 16 июл 2019 в 12:52
-
1. На svg делать белый оверлей когда можно сделать саму волну - это какое-то извращение. 2. Тебе правка вместо твоего костыля
margin-bottom: -1px;
. 3. Не надо постить ссылки на свои сайты в качестве ответов.– Qwertiy ♦16 июл 2019 в 13:19
Тоже на 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>