<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=200&fit=crop" />
</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=500&h=1000&fit=crop" />
</div>

.tooltip {
  clip-path: url(#tooltip);
  font-size: 0;
  width: 100%;
  max-width: 350px;
  + .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%;
}