how can i have background shapes with css?
<p>I achieved something like this using a div with the css property of transform: skew();</p>

<p><a href="https://i.stack.imgur.com/Uox1p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uox1p.png" alt="image"></a></p>

<p>however I'd like it to have kind of a curve where the line is going up, so if you could give me a step in the right direction or tell me more about the easiest ways of inserting a responsive svg graphic art to specifically the <strong>background</strong> of the elements or the page itself it'd be much appreciated</p>

<p>EDIT: HERE'S THE CSS USED</p>

<pre><code>.skewed-bg{
    background: #830024;
    -webkit-transform: skew(0deg, -9deg);
    transform: skew(0deg, -9deg);
    margin-top: -200px;
}
.skewed-bg .container{
    -webkit-transform: skew(0deg, 9deg);
    transform: skew(0deg, 9deg);
    padding-top: 200px;
    color: white;
}
</code></pre>