如何在 HTML 中创建泪珠? [英] How do I create a teardrop in HTML?

问题描述

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

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

我尝试过 CSS:

.tear {显示:内联块；变换:旋转(-30度)；边框:5px纯绿色；宽度:50px；高度:100px；边框左上角半径:50%；边框左下角半径:50%；边框右下角半径:50%；}

结果真的很糟糕.

然后我尝试使用 SVG:

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

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

解决方案

SVG 方法:

您可以使用内嵌SVG和<path/>元素代替<polygon/> 不允许弯曲形状的元素.

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

• 2 二次贝塞尔曲线命令2 条顶部曲线(以 Q 开头的线)
• 1 arc 命令底部(以 A 开头的行)

SVG 是制作这种双曲线形状的好工具.您可以通过 SVG/CSS 比较查看此关于双曲线的帖子.在这种情况下使用 SVG 的一些优点是:

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

<小时>对内嵌 SVG 的

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

How do I create a shape like this to display on a webpage?

I don't want to use images since they would get blurry on scaling

I tried with 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>

That turned out really screwed.

And then I tried with SVG:

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

It did get the shape, but the bottom part wasn't curved.

Is there a way to create this shape so it can be used in an HTML page?

解决方案

SVG approach:

You can achieve the double curve easily with an inline SVG and the <path/> element instead of the <polygon/> element which doesn't allow curved shapes.

The following example uses the <path/> element with:

• 2 quadratic bezier curve commands for the 2 top curves (lines beginning with Q)
• 1 arc command for the big bottom one (line beginning with 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 is a great tool to make this kind of shapes with double curves. You can check this post about double curves with an SVG/CSS comparison. Some of the advantages of using SVG in this case are:

• Curve control
• Fill control (opacity, color)
• Stroke control (width, opacity, color)
• Amount of code
• Time to build and maintain the shape
• Scalable
• No HTTP request (if used inline like in the example)

---

Browser support for inline SVG goes back to Internet Explorer 9. See canIuse for more information.

这篇关于如何在 HTML 中创建泪珠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！