title: Complex shapes using clip-path
body: <p>I am working on clip-path, But this thing seems not very easy to me. Actually I need to test a custom shapes using clip-path. I have attached the image below of what I Want.</p>
  
  <p>I have done this so far, But this doesn't seems near to what I want. Any idea how can I achieve the exact shape using polygon clip-path?</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>.margin-0 {
      margin:0
    }
    .padding-0 {
       padding:0 
      }
      
      .clip1 {
          clip-path: polygon(0 0, 0% 100%, 100% 0);
  
        }
    .clip2 {
          clip-path: polygon(1% 50%, 100% 100%, 100% 0);
        }
        </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container-fluid padding-0"&gt;
      &lt;div class="row padding-0"&gt;
          &lt;div class="col-md-12 clip1" style="background-color:#ff0000;color:#fff"&gt;CLIP 1&lt;br&gt;CLIP 1&lt;br&gt;CLIP 1&lt;br&gt;CLIP 1&lt;br&gt;CLIP 1&lt;br&gt;CLIP 1&lt;br&gt;CLIP 1&lt;br&gt;CLIP 1&lt;br&gt;CLIP 1&lt;br&gt;CLIP 1&lt;br&gt;CLIP 1&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row padding-0"&gt;
          &lt;div class="col-md-12 clip2" style="background-color:#262626;color:#fff"&gt;CLIP 2&lt;br&gt;CLIP 2&lt;br&gt;CLIP 2&lt;br&gt;CLIP 2&lt;br&gt;CLIP 2&lt;br&gt;CLIP 2&lt;br&gt;CLIP 2&lt;br&gt;CLIP 2&lt;br&gt;CLIP 2&lt;br&gt;CLIP 2&lt;br&gt;CLIP 2&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is what I need.
  <a href="https://i.stack.imgur.com/sDfGp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sDfGp.png" alt="enter image description here"></a></p>