<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>

.tooltip {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 10px),
    calc(50% + 10px) calc(100% - 10px),
    50% 100%,
    calc(50% - 10px) calc(100% - 10px),
    0% calc(100% - 10px)
  );
  font-size: 0;
}

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