<div class="banner">
<svg id="triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 112">
<path d="M0,0,947.071,112,1920,0ZM1920,112H0V0H1920Z" fill="#fff" fill-rule="evenodd"></path>
</svg>
</div>
<div class="banner">
<svg id="diagonal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 200">
<polygon points="0 198.225 0 200 1920 200 1920 0 0 198.225" fill="#fff" />
</svg>
</div>
<div class="banner">
<svg id="curve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 100">
<path d="M960,99.138C600.325,99.138,268.169,61.289,0,0V100H1920V0C1651.831,61.289,1319.675,99.138,960,99.138Z" fill="#fff" />
</svg>
</div>
<div class="banner">
<svg id="offset-triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 198.5">
<polygon points="540 196.5 0 98.5 0 198.5 1920 198.5 1920 0 540 196.5" fill="#fff" />
</svg>
</div>
<div class="banner">
<svg id="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 98">
<path d="M0,100H1920V50s-199.017,48-532,48C942.522,98,885.982,2,520,2,173.517,2,0,50,0,50v50Z" fill="#fff" />
</svg>
</div>
.banner {
position: relative;
width: 100%;
height: 15em;
margin-bottom: 5em;
// BG Image
background-image: url("https://unsplash.it/1920/500?image=0&blur");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.