如何在HTML中创建泪珠?

村村 · 04月07日

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

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

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

CSSHTML
回答
时间
想发表一点想法咩~

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序