<div class="container">
  <h2>Testimonials</h2>
  <div class="info">
    <div class="ratio"></div>
    <div class="text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque voluptatum cum aliquid laboriosam quibusdam voluptatem doloremque labore beatae harum minus?
    </div>
    <div class="user-info">
      <p>Edward Lewis</p>
      <p>Circle cofaunder</p>
    </div>
  </div><!-- info -->
  <img src="http://placehold.it/200x300" alt="">
</div>
.container {
  max-width: 480px;
  margin: auto;
  overflow: hidden;
}

.info {
  float: left;
  margin-right: 30px;
  font-size: 14px;
  font-family: sans-serif;
  width: 50%;
}

.ratio {
  width: 150px;
  padding-top: 50px;
  padding-bottom: 20px;
}

img {
  float: right;
  display: block;
  max-width: 100%;
}
let html = `
<svg viewBox="0 0 500 95" xmlns="http://www.w3.org/2000/svg" id="svg">
  <defs>
    <clipPath id="clip">
      <path d="M49,0 64,30 100,35 75,57 80,95 50,78 18,95 24,57 0,36 31,30 M100,36 133,30 149,0 164,30 200,36 175,57 180,95 152,78 119,95 124,60 M200,36 233,30 249,0 264,30 300,36 275,57 280,95 252,78 219,95 223,60 M300,36 333,30 349,0 364,30 400,36 375,57 380,95 352,78 319,95 324,60 M400,36 433,30 449,0 464,30 500,36 475,57 480,95 452,78 419,95 424,60" />
    </clipPath>
  </defs>
  <rect width="100%" height="100%" fill="#ccc" clip-path="url(#clip)" />
  <rect id="yellow" width="300px" height="100%" fill="yellow" clip-path="url(#clip)" id="ratio" />
</svg>`;

document.querySelector(".ratio").innerHTML = html;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.