Slanted div with SVG

by pphheerroonn

HTML

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel interdum orci. Vestibulum porta mi urna, sit amet finibus velit tempor a. Integer eu orci ut odio dapibus rutrum. Integer nec aliquam libero. Quisque orci eros, tempus quis ligula eu, mollis interdum erat. Praesent pretium diam et nunc porta, eu commodo sapien pellentesque. In hac habitasse platea dictumst. 
</p>
</div>

CSS

body {
    background-color: #fafafa;   
    color: white;
    font-family: 'Helvetica Neue';
    line-height: 1.5;
}
 
.content {
    position: relative;
    height: 200px;
    padding: 25px;
    background-image: linear-gradient(#1fa2ff, #12d8fa, #06ffcb);
}

.content::after {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='#06ffcb' viewBox='0 0 100 100' 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;
    left: 0;
}