<div class="hero">
</div>
body {
background-color: #eaeaea;
}
.hero {
position: relative;
height: 300px;
background-image: linear-gradient(#4568dc, #b06ab3);
}
.hero::after {
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='tomato' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 0,100' /%3E%3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
content: '';
height: 10vw;
width: 100%;
position: absolute;
bottom: -10vw;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.