如何在HTML中创建泪珠？

如何创建这样的形状以显示在网页上？

我不想使用图像，因为它们在缩放时会变得模糊

我需要使用HTML，CSS或SVG制作的泪珠形状

我尝试过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>

事实证明真是搞砸了。

然后我尝试使用SVG：

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

它确实得到了形状，但底部没有弯曲。

有没有一种方法可以创建此形状，以便可以在HTML页面中使用它？