<div class="container">
  <div class="gray-outer">
    <div class="gray-inner">
    <p> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    <p> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
    </div>
  </div>
</div>
$col-width: 350px;
$angle-gap: 200px;

* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  height: 100%;
  background: navy;
}
.container {
  min-height: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: white;
  overflow: hidden;
}

.gray-outer {
  position: relative;
  background: #eee;
  width: 200%;
  transform-origin: 0 0; // top left corner
  transform: rotate(45deg);
// extend the gray bg in case the text block is very tall
  &:before { 
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: inherit;
    transform-origin: 100% 0;
    transform: rotate(-45deg);
  }
  .gray-inner {
    max-width: 50%; // half of 200% = 100%
    width: $col-width;
    padding: $col-width 15px 15px;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    // use css shapes, if supported
    @supports (shape-outside: polygon(0 0)) {
        padding-top: 0;
        &:before {
          content: "";
          float: right;
          shape-outside: polygon(0 0, 100% 0, 100% calc(1em + 100%), 0 1em); 
          // top-right triangle
          width: 100%;
          height: $col-width;
          @media (screen and max-width: $col-width) {
            height: 100vw;
          } // @media
        }
        > :first-child {
          padding-top: $angle-gap;
        }
    } // @supports
  }
}
View Compiled
Rerun