<svg>
  <clipPath id="tooltip" clipPathUnits="objectBoundingBox">
    <path d="M1,0H0v0.9302195h0.4483962C0.477628,0.9342086,0.5003342,0.9639273,0.5003369,1h0.0000107 c0-0.0360727,0.022709-0.0657914,0.0519407-0.0697805H1V0z"/>
  </clipPath>
</svg>

<div class="tooltip">
  <img src="https://images.unsplash.com/photo-1621508654686-809f23efdabc?cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTcwMjcyOQ&ixlib=rb-1.2.1&q=85&w=800&h=400" />
</div>

<div class="tooltip">
  <img src="https://images.unsplash.com/photo-1622396481359-6f5c5f481566?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMjY2OTc5OA&ixlib=rb-1.2.1&q=80&w=400" />
</div>

.tooltip {
  mask-image:
    linear-gradient(#fff, #fff), // Rectangle
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 18"><path d="M0,0c10.6919355,1.0289959,18.997036,8.6949739,18.9980297,18h0.0039406c0-9.3050261,8.3060932-16.9710045,18.9980297-18H0z"/></svg>'); // Bottom arrow
  mask-position: 
    0 0, // Rectangle
    50% 100%; // Bottom arrow
  mask-size:
    100% calc(100% - 18px), // Rectangle
    38px 18px; // Bottom arrow
  mask-repeat: no-repeat;
  font-size: 0;
  width: 100%;
  max-width: 400px;
  + .tooltip {
    margin-top: 20px;
  }
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

body {
  background: #E5E5E5;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 90vh;
  padding: 20px 10px;
}
img {
  width: 100%;
}