Comment créer une larme en HTML?

comment créer une forme comme celle-ci pour l'afficher sur une page web?

je ne veux pas utiliser images depuis qu'ils seraient floues sur l'échelle

j'ai essayé avec CSS :

.tear {
  display: inline-block;
  transform: rotate(-30deg);
  border: 5px solid green;
  width: 50px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="tear">
</div>

Qui s'est avéré vraiment vissé.

et puis J'ai essayé avec SVG:

<svg viewBox="0 100 100">
  <polygon points="50,0 100,70 50,100 0,70"/>
</svg>

il a eu la forme, mais la partie inférieure n'était pas courbée.

y a-t-il un moyen de créer cette forme pour qu'elle puisse être utilisée dans une page HTML?