<section class="container">
  <div class="bubble right">
    <img src="https://images.unsplash.com/photo-1621508654686-809f23efdabc?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTcwMjcyOQ&ixlib=rb-1.2.1&q=85&w=800" alt="Picture of a beach" />
  </div>

  <div class="bubble right">
    <p>Marzipan topping cotton candy dessert cookie chupa chups candy canes. Lemon drops tootsie roll gummies bonbon tart.</p>
  </div>
  
  <div class="bubble left">
    <img src="https://images.unsplash.com/photo-1621338878752-1d2e42f0d0e4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTcwMzY3MA&ixlib=rb-1.2.1&q=85&w=800" alt="Moutain covered with snow" />
  </div>


  <div class="bubble left">
    <p>Cotton candy bear claw gummies. Carrot cake marzipan candy. Sesame snaps wafer icing icing powder bear claw macaroon candy.</p>
  </div>
  
  <div class="bubble left">
    <p>Check below how it's done.</p>
  </div>
  
  <div class="how">
    <img src="data:image/png;base64,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AQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAbAQIAAGQjQAAAgGwECAAAkI0AAQAAshEgAABANgIEAADIRoAAAADZCBAAACAb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" alt="">
  </div>
</section>
$radius: 25px;
.bubble {
  mask-image:
    radial-gradient(#fff ($radius - 0.5), #fff0 $radius), // Top left corner
    radial-gradient(#fff ($radius - 0.5), #fff0 $radius), // Top right corner
    radial-gradient(#fff ($radius - 0.5), #fff0 $radius), // Bottom left corner
    radial-gradient(#fff ($radius - 0.5), #fff0 $radius), // Bottom right corner
    linear-gradient(#fff, #fff), // Horizontal gradient
    linear-gradient(#fff, #fff), // Vertical gradient
    url('data:image/svg+xml;utf8,<svg width="39" height="25" viewBox="0 0 39 25" xmlns="http://www.w3.org/2000/svg"><path d="M38.4998 24.5C27.6998 22.1 22.9998 7.5 21.9998 0.5C11.8331 1.83333 -6.30022 6.3 2.49978 13.5C13.4998 22.5 21.9998 24.5 38.4998 24.5Z" /></svg>'); // Bottom right icon
  mask-position: 
    0 0, // Top left corner
    100% 0, // Top right corner
    0 100%, // Bottom left corner
    100% 100%, // Bottom right corner
    0 $radius, // Horizontal gradient
    $radius 0, // Vertical gradient
    100% 100%; // Bottom right icon
  mask-size:
    ($radius * 2) ($radius * 2),  // Top left corner  
    ($radius * 2) ($radius * 2),  // Top right corner  
    ($radius * 2) ($radius * 2),  // Bottom left corner  
    ($radius * 2) ($radius * 2),  // Bottom right corner  
    100% calc(100% - #{$radius * 2}),  // Horizontal gradient  
    calc(100% - #{$radius * 2}) 100%,  // Vertical gradient 
    (39px / 2) (25px / 2); // Bottom right icon
  mask-repeat: no-repeat;
  margin-bottom: 15px;
  max-width: 60%;
  width: fit-content;
  font-size: 0; // Prevent white space under the images
  @media (max-width: 600px) {
    max-width: 80%;
  }
  
  &.right {
    margin-left: auto;
    background: #549EF5;
    color: white;
  }
  &.left {
    background: #E9E9EB;
    mask-image:
    radial-gradient(#fff, #fff ($radius - 0.5), transparent $radius), // Top left radius
    radial-gradient(#fff, #fff ($radius - 0.5), transparent $radius), // Top right radius
    radial-gradient(#fff, #fff ($radius - 0.5), transparent $radius), // Bottom left radius
    radial-gradient(#fff, #fff ($radius - 0.5), transparent $radius), // Bottom right radius
    linear-gradient(#fff, #fff), // Horizontal gradient
    linear-gradient(#fff, #fff), // Vertical gradient
    url('data:image/svg+xml;utf8,<svg width="39" height="24" viewBox="0 0 39 24" xmlns="http://www.w3.org/2000/svg"><path d="M0.000217438 24C10.8002 21.6 15.5002 7 16.5002 0C26.6669 1.33333 44.8002 5.8 36.0002 13C25.0002 22 16.5002 24 0.000217438 24Z" /></svg>'); // Bottom left icon
  mask-position: 
    0 0, // Top left radius
    100% 0, // Top right radius
    0 100%, // Bottom left radius
    100% 100%, // Bottom right radius
    0 $radius, // Horizontal gradient
    $radius 0, // Vertical gradient
    0 100%; // Bottom right icon
  }
  
  img {
    max-width: 100%;
  }
  
  p {
    position: relative;
    font-size: 18px;
    line-height: 1.2;
    font-family: sans-serif;
    padding: 15px 15px;
    margin: 0;
    letter-spacing: 0.02em;
    @media (max-width: 600px) {
      font-size: 16px;
    }
  }
}

body {
  background: #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  padding: 20px 10px;
}

.container {
  background: white;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 0 100px rgba(0,0,0,0.2);
}
img {
  max-width: 100%;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.