<div class="wrapper">
  <div class="shape"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, esse vel? Dolorem cupiditate sunt dolor nesciunt molestias eligendi aliquid, quae eaque maiores expedita a error, explicabo, id magnam praesentium sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eligendi reiciendis aspernatur eaque fugit commodi doloremque aut soluta dolor, quaerat amet blanditiis quibusdam rem! Nesciunt nostrum dignissimos ad commodi reiciendis.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, esse vel? Dolorem cupiditate sunt dolor nesciunt molestias eligendi aliquid, quae eaque maiores expedita a error, explicabo, id magnam praesentium sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eligendi reiciendis aspernatur eaque fugit commodi doloremque aut soluta dolor, quaerat amet blanditiis quibusdam rem! Nesciunt nostrum dignissimos ad commodi reiciendis.</p>
</div>

.wrapper {
  padding: 3rem;
}

.wrapper:first-child {
  margin-bottom: 2rem;
}

.shape {
  float: left;
  height: 300px;
  justify-content: center;
  shape-outside: linear-gradient(45deg, #0277bd, transparent 50%);
  width: 300px;
}

.threshold {
  shape-image-threshold: 0.15;
}

h1 {
  font-size: 20px;
  transform: rotate(270deg);
}