Подскажите, пожалуйста, как лучше всего сделать такие переходы между секциями?
1 ответ
Существует несколько способов сделать это.
Например, вы можете воспользоваться псеводоэлементами before
и after
, поиграв с их границами:
.skew {
width: 400px;
margin: 100px auto 0;
background: #000000;
padding: 20px;
color: white;
position: relative;
}
.skew::before {
content: '';
border-left: 440px solid transparent;
border-bottom: 50px solid #000000;
position: absolute;
bottom: 100%;
left: 0;
}
.skew::after {
content: '';
border-right: 440px solid transparent;
border-top: 50px solid #000000;
position: absolute;
top: 100%;
left: 0;
}
.skew h1,
.skew p {
text-align: center;
}
<div class="skew">
<h1>Заголовок</h1>
<p>Lorem ipsum</p>
</div>
Так же можно воспользоваться свойством transform
и функцией skew
для псевдоэлемента before
(или любого другого):
.skew {
width: 400px;
margin: 100px auto 0;
padding: 20px;
color: white;
position: relative;
}
.skew::before {
content: '';
background: #000000;
position: absolute;
width: 100%;
height: 100%;
left: 0;
transform: skew(0, -10deg);
z-index: -1;
}
.skew h1,
.skew p {
text-align: center;
}
<div class="skew">
<h1>Заголовок</h1>
<p>Lorem ipsum</p>
</div>
Удачи!