如何在HTML中创建泪滴？

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

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

我尝试了CSS：

。撕裂{
显示：内联块；
变换：旋转（-30度）；
边框：5px纯绿色；
宽度：50px；
高度：100px；
边界左上半径：50%；
边界左下半径：50%；
边框右下半径：50%；
}

基本边界半径 在CSS中，使用“边界半径”和变换可以相对轻松地做到这一点。你的CSS有点过时了

。撕裂{
宽度：50px；
高度：50px；
边界半径：050%50%50%；
边框：3倍纯黑；
变换：旋转（45度）；
边缘顶部：20px；
}

---

您的CSS代码的主要问题是：

您使用的高度与宽度不同

您没有旋转正确的角度大小

因此，通过“修复”这些问题，您将产生：

。撕裂{
显示：内联块；
变换：旋转（-45度）；
边框：5px纯绿色；
宽度：100px；
高度：100px；
边界左上半径：50%；
边界左下半径：50%；
边框右下半径：50%；
}
/***仅供演示***/
.眼泪{
利润率：50像素；
}

---

我个人会为此使用SVG。您可以在大多数矢量图形软件中创建SVG。我建议：

• Adobe Illustrator

我在下面做了一个，是在Illustrator中对你的形状的追踪

---

使用SVG很容易做到这一点，只需使用图像转换资源，例如，用于创建以下内容：

由Peter Selinger 2001-2015编写的potrace 1.12创建

我还发现了使用CSS和

框阴影

样式和参数方程的用户制作。非常简单，代码非常少。并且许多支持CSS3盒阴影样式：

正文{
背景色：黑色；
}
.眼泪{
位置：绝对位置；
最高：50%；
左：50%；
保证金：-0.125em；
宽度：0.25em；
高度：0.25em；
边界半径：50%；
盒影：0em-5em-5em红色，0.00118em-0.00118em-4.97592emţff1800，0.00937em-4.90393em35333em353333em-4.90393em353333em-3.9039393em-4.9039393em35333em（ff3000）ff3000，0.03125em-0.0-4.0-4.785em-4.785-4.7855555em-4.78555em-4.7855em-5-5-5-555em3533333333333333333em-5埃姆（FF3533333333em3533em3533333333333em35333埃姆（ff3000）ff3000，ff3000，ff3000 EM黄金，0.92382em-2.77785em#ffef00，1.16547em-2.35698em#f7ff00，1其中1.97361em-0.97361em-0.97361em-0.97545em-0.97545em-0.97545em-0.97545em-afff0 0、2.2441em-1.91342em-1.91342em-1.91342em-2.41em-1.91342em-2.2em-2.342em-2.2.2.342em-1.412em-1.412em-1.412em \3522222;基金基金基金会基金会基金会基金会基金会基金会基金会基金会基金会基金会基金会基金会基金会基金会基金会，1，1、1.1.1.1.1.4178787878787878787878787878787878999977埃姆-1-1-1-1-1-1.45142埃埃米-C73.24414em 2.35698em#08ff00、3.23352em 2.77785em#00ff10、3.15851em 3.17197em#00ff28、3.01777他们3.53553em 3.53553em 3.00ff40、2.811966 em 3.8650EM 0.00ff58、2.54377 em 4.1573EM 0.00ff70、2.25783 em 4.15733 em 3.53553 em 3.53553 em 3.3 3 3.3 3 3.3 3.3 3 3.3 3.3 3.3 3.3.3 3.3.3.3.3 3.3.3.3 3.3.3 3.3.3.3.3.3.3.3.3.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.4.0毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫毫不不不#00e7ff，-0.96608em 4.90393em#00cfff，-1.42017em 4.7847em#00b7ff，-1.84059em 4.6194em#2009年FFF，2.2177833EM 4.40961em 4.40961EM0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 F，2.1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 7 3 3 3.783 3 3.783 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3.533 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3.1585 5 5 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 45142em#3800ff，-2.93032em 0.97545em#5000ff，-2.73182em 0.49009em#6800ff，-2.5em 0.0e7.0FF，1.97361em-0.97545em-0.97545em，af00ff，1.6978789em-1.69789em-1.69789em-1.69789em-1.78787em-0.975455em，af00ff，1.6978789Em-1.697871em-0.9700000000F0FF，7-1.69789em-1.789em-1.1.1.451429em-1.1.45142埃米-1.1.1.45142埃米-1.1.45埃米-1.45埃米-1.45142埃米-1.415埃米-1.780米（7埃米-1.7800基金基金基金基金基金基金基金会，7基金会，7基金会，7基金基金会，7基金会，7 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0#ff00bf，-0.36em-3.86505em#ff00a7，-0.23408em-4.15735em#ff008f，-0.13915em-4.40961em#ff0078-0.07283em-4.6194em#ff0060，-0.03125em-4.7847em#ff0048，-0.00937em-4.90393em#ff0030，-0.00118em-4.97592em#ff0018；
}

---

如果您选择使用SVG，您应该阅读路径。我还建议使用SVG编辑器

SVG方法： 使用内联SVG和

元素，而不是不允许弯曲形状的

元素，可以轻松实现双曲线

以下示例将

元素与一起使用：

• 2个顶部曲线（以

  Q开始的线）

• 1表示底部大的一行（以

  A开始的一行）

---

或者，如果您的观众字体支持，请使用Unicode字符

---

液滴：IMO此形状需要平滑曲线到beziers，以确保曲线的连续性

问题是： 对于这个问题

---

• 不能使用平滑曲线，因为控制点的长度不同。但我们仍然需要使控制点与之前的控制点正好相反（180度），以确保曲线的完全连续性下图说明了这一点：

注意：红色和蓝色曲线是两条不同的二次曲线

• 笔划linejoin=“斜接”

  ，用于尖头顶部零件

• 由于此形状仅使用连续的

  c

  命令，因此我们可以忽略它

这里是最后一段：

HTML画布 到目前为止，这是本线程中未涉及的选项。用于画布绘制的命令与SVG非常相似（而web tiki在本回答中使用的基本思想值得称赞）

可以使用画布自己的曲线命令（二次曲线或贝塞尔曲线）或路径API创建所讨论的形状。答案包含所有三种方法的示例

对画布的浏览器支持是

---

使用四边形