title: how can i have background shapes with css?
body: <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>