<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
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.