title: Angled divider with image in section below
body: <p>I am working on doing an slice, or angled edge with my React app. I am using tailwinds css however using some custom CSS I managed to get it done. However, while its doing the slice, i would like it to be filled with the div below it instead of white.</p>
  <p>Is that possible?</p>
  <p>Here is my CSS</p>
  <pre><code> .angle--bottom-right {
      position: relative;
      overflow: hidden;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
              clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
    }
    
    @supports not ((-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%)) or (clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%))) {
      .angle--bottom-right::before, .angle--bottom-right::after {
        content: &quot;&quot;;
        position: absolute;
        left: 0;
        z-index: 10;
        display: block;
        border-style: solid;
      }
      .angle--bottom-right::after {
        bottom: 0;
        border-width: 0 0 8vw 100vw;
        border-color: transparent transparent transparent transparent;
      }
    }
  </code></pre>
  <p>Here is what I happening</p>
  <p><a href="https://i.stack.imgur.com/c0EVg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c0EVg.png" alt="enter image description here" /></a></p>
  <p>The white triangle I want to be filled with the DIV that is below it.</p>