html - 如何在 HTML 中创建泪珠？

Question

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

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

我用 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>

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

有没有办法创建这个形状以便在 HTML 页面中使用它？

Answer 1

SVG 方法:

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

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

• 2 quadratic bezier curve commands对于 2 条顶部曲线(以 Q 开头的线)
• 1 arc command对于大底部(以 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 是制作这种双曲线形状的好工具。您可以查看 post about double curves与 SVG/CSS 比较。在这种情况下使用 SVG 的一些优点是:

• 曲线控制
• 填充控制(不透明度、颜色)
• 描边控制(宽度、不透明度、颜色)
• 代码量
• 是时候建立和保持形状了
• 可扩展
• 没有 HTTP 请求(如果像示例中那样使用内联)

---

浏览器支持可追溯到 Internet Explorer 9。请参阅 canIuse了解更多信息。