JSFiddle - React, Tailwind, and code Playground

HTML

<img class="bubble" width="450" height="350" src="http://jeudego.org/_img/divers/z.png">

<svg width="0" height="0">
	<defs>
		<clipPath id="bubbleClip" clipPathUnits="objectBoundingBox">
			<rect x="0" y="0" width="1.0" height="0.95" rx="0.1"/>
			<polygon points="0.45 0.95,0.55 0.95,0.5 1.0"/>
		</clipPath>
	</defs>
</svg>

CSS

.bubble
{
	-webkit-clip-path:url(#bubbleClip);
	clip-path:url(#bubbleClip);
}