<div class="testimonial">
  <p>" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet faucibus turpis ac accumsan. Integer aliquet semper massa quis commodo. Nam quis nibh vel ante imperdiet ornare a in lacus. Phasellus laoreet pretium diam ac semper  "</p>
  <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Jane Doe">
  <h4>Jane Doe</h4>
</div>

<div class="testimonial">
  <p>" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet faucibus turpis ac accumsan. Integer aliquet semper massa quis commodo. Nam quis nibh vel ante imperdiet ornare a in lacus. Phasellus laoreet pretium diam ac semper  "</p>
  <img src="https://randomuser.me/api/portraits/men/14.jpg" alt="John Doe">
  <h4>John Doe</h4>
</div>
.testimonial {
  --w:600px;
  --c:calc(100vw - var(--w));
  
  max-width:500px;
  margin:20px auto clamp(20px,var(--c)*-1000,120px);
  position:relative;
  padding-right:clamp(0px,var(--c)*1000,140px);
}
.testimonial p {
  padding:10px;
  background:#37b1d9;
  border-radius:15px;
  margin:0;
  font-size:20px;
}
.testimonial img {
  position:absolute;
  width:clamp(60px,var(--c)*1000,100px);
  border-radius:50%;
  right:clamp(0px,var(--c)*-1000,40px);
  top:clamp(0%,var(--c)*-1000,calc(100% + 15px));
}
.testimonial h4 {
  position:absolute;
  top:clamp(110px,var(--c)*-1000,calc(100% + 35px));
  right:clamp(50px,var(--c)*-1000,110px);
  transform:translate(clamp(0px,var(--c)*1000,50%));
  margin:0;
}
.testimonial:before {
   content: "";
   position: absolute;
   top: clamp(50px,var(--c)*-1000,calc(100% - 18px));
   right: clamp(0px,var(--c)*1000,110px);
   width: 40px;
   height: 40px;
   background: #37b1d9;
   clip-path: polygon(20% 0,100% 00%,0 100%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.