JSFiddle - React, Tailwind, and code Playground

by Simon Hi

HTML

<h1>Bubble clip</h1>
<div class="bubble">
	<img src="https://jeudego.org/_img/divers/old_goban.jpg" alt="" />
</div>

CSS

div.bubble {
  font-size: 1.25em;
  display: inline-block;
  position: relative;
  overflow: visible;
  border-radius: 5%;
  margin: 0 auto 1em auto;
  background-repeat: no-repeat;
  background-position: center top;
  color: white;
  background-image: url(https://jeudego.org/_img/divers/old_goban.jpg);
}

div.bubble img {
  display: block;
  margin-bottom: -1em;
  visibility: hidden;
}

div.bubble:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -1em;
  left: calc(50% - 1em);
  border-top: 1em solid transparent;
  border-left: 1em solid;
  border-right: 1em solid;
  background-image: inherit;
  background-position: center bottom;
  background-size: inherit;
}