<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;
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.