<main class="container">
<section class="gradient">
<h1>Top Section</h1>
</section>
<section class="separador-top separador-bottom">
<h1>Mid Section</h1>
</section>
<section class="gradient">
<h1>Bottom Section</h1>
</section>
</main>
$rosa: #ff4169;
$lilaz: #7c26f8;
$branco: #fff;
*{
box-sizing: border-box;
font-family: sans-serif;
margin:0;
padding:0;
}
.container{
width: 100%;
}
.gradient{
background-image: linear-gradient(50deg,$rosa,$lilaz);
color: #fff;
}
section{
padding:120px 0;
display:flex;
justify-content: center;
align-items: center;
}
.separador-top{
background: $branco;
position: relative;
&:before{
content: "";
position: absolute;
top: -60px;
border-style: solid;
border-width: 0 0 60px 100vw;
border-color: transparent $branco $branco transparent;
}
}
.separador-bottom{
background: $branco;
position: relative;
&:after{
content: "";
position: absolute;
bottom: -60px;
border-style: solid;
border-width: 60px 100vw 0 0;
border-color: $branco transparent transparent $branco;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.