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

问题描述

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

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

我尝试过使用 CSS ：

.tear {display：inline-block; transform：旋转（-30deg）;边框：5px纯绿色;宽度：50px; height：100px;边框顶部左半径：50％;边界左下半径：50％; border-bottom-right-radius：50％;}

< div class =tear>< / div>

然后我试着用SVG： b
$ b

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

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

有没有一种方法可以创建这种形状所以它可以在HTML页面中使用？

解决方案

SVG方法：

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

• 2 二次贝塞尔曲线命令，用于2条顶部曲线（以开头的行> Q ）


• 1 arc命令 fo r大底部（以 A 开头的行）





 < svg width =30％viewbox =0 0 30 42> < path fill =transparentstroke =＃000stroke-width =1.5d =M15 3 Q16.5 6.8 25 18 A12.8 12.8 0 1 1 5 18 Q13.5 6.8 15 3z/> gt ;< / svg>  





这种双曲线形状。您可以使用SVG / CSS比较来查看此有关双曲线的帖子。在这种情况下使用SVG的一些优点是：
$ b



• 曲线控制


• 填充控制（不透明度，颜色）


• 笔画控制（宽度，不透明度，颜色）


• 数量


• 时间构建和维护形状


• 可伸缩


• 没有HTTP请求（如果在示例中以内联方式使用） / ul>
  
  

  ---

  
  
  

  针对内联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屋！