title: Two gradients with two distinct sections with just one div element
body: <p>I was wondering if it is possible to create a background effect like in the image below <strong>using just one div</strong>.</p>
  
  <p>I know how to achieve it with two divs, but my situation would make it really easy if it could be done in one div (maybe using :after ???). The code for the gradients is:</p>
  
  <pre><code>.bg-green {
      background-image: linear-gradient(-180deg, #95D428 0%, #20560B 100%);
  }
  
  .bg-red {
      background-image: linear-gradient(-180deg, #F5515F 0%, #8E0A1E 100%; 
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/e7uYa.png" alt="enter image description here"></p>
  
  <p>Thanks :)</p>