title: How to set a custom shaped background using CSS clip-path property?
body: <p>i'm struggling with <code>clip-path</code> property in order to create an abstract background and i don't want to use an image or svg file, i tried with that property but i can't achieve this result :
  <a href="https://i.stack.imgur.com/8pigp.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>my basic code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bg{
    height: 100vh;
      margin: 0;
  }
  .shape-1{
       -webkit-clip-path: polygon(0 0, 10% 45%, 100% 0);
      clip-path: polygon(0 10%, 40% 36%, 100% 0);
      background:  #3e19c6;
      height: 100%;
      width: 100%;
      position: absolute;
      margin: 0;
      z-index: -1; 
  }
  
  
  .shape-2{
    -webkit-clip-path: polygon(0 62%, 100% 21%, 100% 100%, 0% 100%);
      clip-path: polygon(0 62%, 90% 21%, 100% 100%, 0% 85%);
  background:  #c61951;
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;
  z-index: -1;   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bg"&gt;
      &lt;div class="shape-1"&gt;    &lt;/div&gt;
      &lt;div class="shape-2"&gt;    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>