如何在 HTML 中创建泪珠？

小编典典

如何在 HTML 中创建泪珠？

all

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

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

我需要用 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 页面中使用？

阅读 61

2022-06-08

共1个答案

小编典典

SVG方法：

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

以下示例将<path/>元素与：

2个顶部曲线的 2 个二次贝塞尔曲线命令（以开头的线Q）
大底的1 个弧线命令（以开头的行A）

<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/CSS
比较查看这篇关于双曲线的帖子。在这种情况下使用 SVG 的一些优点是：

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

浏览器 对内联 SVG 的支持可以追溯到 Internet Explorer
9。有关更多信息，请参阅canIuse。

2022-06-08