如何在 HTML 中创建泪滴？

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

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

我尝试过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 页面中使用它？

SVG 方法：

您可以轻松地实现双曲线内联SVG和<path/>元素而不是<polygon/>不允许弯曲形状的元素。

以下示例使用<path/>元素：

• 2 二次贝塞尔曲线命令 https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Bezier_Curves对于 2 条顶部曲线（以Q)
• 1 圆弧命令 https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Arcs对于大底部（以A)

<svg width="30%" viewbox="0 0 30 42">
  <path fill="transparent" stroke="#000" stroke-width="1.5"
        d="M15 3
           Q16.5 6.8 25 18
           A12.8 12.8 0 1 1 5 18
           Q13.5 6.8 15 3z" />
</svg>

SVG 是制作此类双曲线形状的绝佳工具。你可以检查这个关于双曲线的帖子 https://stackoverflow.com/questions/28986125/double-curved-shape与 SVG/CSS 比较。在这种情况下使用 SVG 的一些优点是：

• 曲线控制
• 填充控制（不透明度、颜色）
• 描边控制（宽度、不透明度、颜色）
• 代码量
• 塑造和维持形状的时间
• Scalable
• 没有 HTTP 请求（如果像示例中那样内联使用）

浏览器支持对于内联 SVG，请返回 Internet Explorer 9。请参阅canIuse http://caniuse.com/#feat=svg-html5了解更多信息。