SOURCE

<div class="main">
  <!--   <div class="left"></div> -->
  <div class="right"></div>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes
  </p>
  <p>
    Sometimes a web page's text content appears to be funneling your attention
    towards a spot on the page to drive you to follow a particular link.
    Sometimes you don't notice.
  </p>
</div>

<style>
    .main {
        width: 500px;
    }

    .left,
    .right {
        width: 100%;
        height: 1200px;
        background-color: lightgray;
    }
    .right {
        shape-outside: polygon(100% 0, 100% 100%, 0 100%);
        float: right;
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }
    p {
        text-align: center;
        border: 1px solid #f00;
    }

</style>