如何在HTML中创build泪珠？

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

我不想使用图像，因为他们会缩放模糊

泪滴形状我需要使用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>

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

有没有办法创build这个形状，以便它可以在HTML页面中使用？

SVG方法：

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

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

2条顶部曲线的二次贝塞尔曲线命令（以Q开头的行）
大底1 弧指令（以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>

基本的边界半径

你可以使用边界半径相对容易地做到这一点和变换。你的CSS只是一点点。

 .tear { width: 50px; height: 50px; border-radius: 0 50% 50% 50%; border: 3px solid black; transform: rotate(45deg); margin-top: 20px; }

 <div class="tear"></div>

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

你使用了不同的宽度
您没有旋转正确的angular度大小

所以，通过“解决”这些问题，你会产生：

 .tear { display: inline-block; transform: rotate(-45deg); border: 5px solid green; width: 100px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } /***for demo only***/ .tear { margin: 50px; }

 <div class="tear"> </div>

IMO这种形状需要平滑的曲线来确保曲线的连续性。

问题的下降：

对于这个问题，

不能使用平滑曲线，因为控制点不会具有相同的长度。但是我们仍然需要使控制点与前一个控制点完全相反（180度）， 以确保曲线的完全连续性。下面给出的图片说明了这一点：

在这里输入图像说明
注：红色和蓝色曲线是两个不同的二次曲线。

stroke-linejoin="miter" ，指向顶部。
由于这个形状只使用连续的c命令，我们可以忽略它。

这是最后的片段：

 <svg height="300px" width="300px" viewBox="0 0 12 16"> <path fill="#FFF" stroke="black" stroke-width="0.5" stroke-linejoin="miter" d="M 6 1 c -2 3 -5 5 -5 9 0 7 10 7 10 0 0 -4 -3 -6 -5 -9z" /> </svg>

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

DROPLET：💧（ `💧` ）

要么

黑滴：🌢（ `🌢` ）

按比例缩放！

我个人使用这个SVG。您可以在大多数vectorgraphics软件中创buildSVG。我build议：

Inkscape中
草图
Adobe Illustrator

我在下面做了一个，这是在Illustrator中跟踪你的形状。

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="223.14px" height="319.008px" viewBox="0 0 223.14 319.008" enable-background="new 0 0 223.14 319.008" xml:space="preserve"> <path fill="none" stroke="#000000" stroke-width="12" stroke-miterlimit="10" d="M111.57,13.291c0,0,57.179,86.984,72.719,108.819 c30.359,42.66,41.005,114.694,1.626,154.074c-20.464,20.463-47.533,30.293-74.344,29.488h-0.002 c-26.811,0.805-53.88-9.025-74.344-29.488C-2.154,236.804,8.492,164.77,38.851,122.11C54.391,100.275,111.57,13.291,111.57,13.291z" /> </svg>

HTMLcanvas

这是迄今在这个线程中发现的一个选项。用于Canvas绘图的命令与SVG非常相似（web-tiki值得这个答案中使用的基本思想）。

可以使用canvas自己的曲线命令（Quadratic或Bezier）或Path API创build所讨论的形状。答案包含所有三种方法的例子。

浏览器对Canvas的支持相当不错。

使用二次曲线

 window.onload = function() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.lineJoin = 'miter'; ctx.moveTo(120, 20); ctx.quadraticCurveTo(117.5, 30, 148, 68); ctx.arc(120, 88, 34.5, 5.75, 3.66, false); ctx.quadraticCurveTo(117.5, 35, 120, 20); ctx.closePath(); ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.fillStyle = '#77CCEE' ctx.stroke(); ctx.fill(); } }

 canvas { margin: 50px; height: 100px; width: 200px; transform: scale(1.5); } body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); }

 <canvas id='canvas'></canvas>

我还在用户Ana Tudor使用CSS和box-shadow风格和参数方程编制了Codepen 。非常简单，很less的代码。许多浏览器都支持CSS3 Box-shadow风格：

 body { background-color: black; } .tear { position: absolute; top: 50%; left: 50%; margin: -0.125em; width: 0.25em; height: 0.25em; border-radius: 50%; box-shadow: 0em -5em red, 0.00118em -4.97592em #ff1800, 0.00937em -4.90393em #ff3000, 0.03125em -4.7847em #ff4800, 0.07283em -4.6194em #ff6000, 0.13915em -4.40961em #ff7800, 0.23408em -4.15735em #ff8f00, 0.36em -3.86505em #ffa700, 0.51777em -3.53553em #ffbf00, 0.70654em -3.17197em gold, 0.92382em -2.77785em #ffef00, 1.16547em -2.35698em #f7ff00, 1.42582em -1.91342em #dfff00, 1.69789em -1.45142em #c7ff00, 1.97361em -0.97545em #afff00, 2.2441em -0.49009em #97ff00, 2.5em 0.0em #80ff00, 2.73182em 0.49009em #68ff00, 2.93032em 0.97545em #50ff00, 3.08681em 1.45142em #38ff00, 3.19358em 1.91342em #20ff00, 3.24414em 2.35698em #08ff00, 3.23352em 2.77785em #00ff10, 3.15851em 3.17197em #00ff28, 3.01777em 3.53553em #00ff40, 2.81196em 3.86505em #00ff58, 2.54377em 4.15735em #00ff70, 2.21783em 4.40961em #00ff87, 1.84059em 4.6194em #00ff9f, 1.42017em 4.7847em #00ffb7, 0.96608em 4.90393em #00ffcf, 0.48891em 4.97592em #00ffe7, 0.0em 5em cyan, -0.48891em 4.97592em #00e7ff, -0.96608em 4.90393em #00cfff, -1.42017em 4.7847em #00b7ff, -1.84059em 4.6194em #009fff, -2.21783em 4.40961em #0087ff, -2.54377em 4.15735em #0070ff, -2.81196em 3.86505em #0058ff, -3.01777em 3.53553em #0040ff, -3.15851em 3.17197em #0028ff, -3.23352em 2.77785em #0010ff, -3.24414em 2.35698em #0800ff, -3.19358em 1.91342em #2000ff, -3.08681em 1.45142em #3800ff, -2.93032em 0.97545em #5000ff, -2.73182em 0.49009em #6800ff, -2.5em 0.0em #7f00ff, -2.2441em -0.49009em #9700ff, -1.97361em -0.97545em #af00ff, -1.69789em -1.45142em #c700ff, -1.42582em -1.91342em #df00ff, -1.16547em -2.35698em #f700ff, -0.92382em -2.77785em #ff00ef, -0.70654em -3.17197em #ff00d7, -0.51777em -3.53553em #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; }

 <div class="tear"></div>

CSS版本

由于这里有一个相当less的答案，我想为什么不用另一种方法join它。这是使用HTML和CSS来创build泪珠。

这将允许你改变泪滴的边界和背景的颜色，并重新调整它的顶部。

使用一个div我们可以创build一个带有border和border-radius 。然后使用伪元素（ :before ＆ :after ）我们^在这里创build一个CSS三angular形，这将作为泪珠的尖端。使用:before作为边界我们放置:after较小的大小和所需的背景颜色上。

 div { width: 100px; height: 100px; border-radius: 50%; border: 4px solid; margin: 80px auto; position: relative; } div:before, div:after { content: ""; display: block; position: absolute; width: 0; height: 0; } div:before { border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 104px solid black; top: -75px; } div:after { border-left: 46px solid transparent; border-right: 46px solid transparent; border-bottom: 96px solid #fff; top: -66px; left: 0; right: 0; margin: auto; z-index: 1; }

 <div></div>

用SVG做这个很简单，只需要使用一个图像转换资源，比如http://image.online-convert.com/convert-to-svg ，用来创build以下内容：

 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="213.000000pt" height="300.000000pt" viewBox="0 0 213.000000 300.000000" preserveAspectRatio="xMidYMid meet"> <metadata> Created by potrace 1.12, written by Peter Selinger 2001-2015 </metadata> <g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M1035 2944 c-143 -250 -231 -380 -508 -752 -347 -465 -432 -616 -493 -882 -91 -394 10 -753 285 -1013 508 -479 1334 -361 1677 240 126 221 165 494 105 726 -66 254 -178 452 -609 1076 -96 140 -226 335 -288 435 -155 249 -135 229 -169 170z m85 -212 c40 -69 192 -298 543 -818 268 -396 354 -593 364 -835 12 -281 -82 -509 -296 -714 -103 -99 -236 -173 -396 -221 -82 -25 -105 -27 -260 -28 -148 -1 -181 2 -255 22 -348 96 -611 357 -691 689 -41 167 -25 392 41 587 62 185 154 334 444 716 177 235 320 444 402 592 27 49 51 88 54 88 3 0 25 -35 50 -78z"/> </g> </svg>

如果你select使用SVG，你应该阅读path。我也会build议一个SVG编辑器。

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-0.05 0 1195.1 703" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable" transform=""> <defs id="svgEditorDefs"> <line id="svgEditorLineDefs" stroke="black" style="fill: none; vector-effect: non-scaling-stroke; stroke-width: 1px;"/> </defs> <rect id="svgEditorBackground" x="0" y="0" width="1195" height="703" style="fill: none; stroke: none;"/> <path stroke="black" id="e1_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" d="M 198 207 a 117.969 117.969 0 1 0 213 8" transform=""/> <path stroke="black" id="e4_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="" d="M 411.348 215.696 a 349.677 349.677 0 0 0 -110.37 -131.718"/> <path stroke="black" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="matrix(-0.182706 -0.983168 0.983168 -0.182706 157.664 417.408)" id="e6_circleArc" d="M 301.799 202.299 a 329.763 329.763 0 0 0 -102.951 -124.781"/> </svg>

这里有四个逐步简化的SVG泪珠形状：

在这里输入图像说明

 <svg viewbox="-20 -20 180 180"> <g stroke="black" fill="none"> <path transform="translate(0)" d="M 0 0 C 0 10 10 17 10 27 C 10 40 -10 40 -10 27 C -10 17 0 10 0 0 Z"/> <path transform="translate(40)" d="M 0 0 C 0 16 15 25 5 34 Q 0 38 -5 34 C -15 25 0 16 0 0 Z"/> <path transform="translate(80)" d="M 0 0 C 0 10 18 36 0 36 S 0 10 0 0 Z"/> <path transform="translate(120)" d="M 0 0 Q 18 36 0 36 T 0 0 Z"/> <g stroke-width="0.25" stroke="red"> <g transform="translate(0)"> <ellipse rx="1" ry="1" cx="0" cy="0" /> <ellipse rx="1" ry="1" cx="0" cy="10"/> <ellipse rx="1" ry="1" cx="10" cy="17"/> <ellipse rx="1" ry="1" cx="10" cy="27"/> <ellipse rx="1" ry="1" cx="10" cy="40"/> <ellipse rx="1" ry="1" cx="-10" cy="40"/> <ellipse rx="1" ry="1" cx="-10" cy="27"/> <ellipse rx="1" ry="1" cx="-10" cy="17"/> <line x1="0" y1="0" x2="0" y2="10"/> <line x1="10" y1="17" x2="10" y2="40"/> <line x1="-10" y1="40" x2="-10" y2="17"/> </g> <g transform="translate(40)"> <ellipse rx="1" ry="1" cx="0" cy="0" /> <ellipse rx="1" ry="1" cx="0" cy="16"/> <ellipse rx="1" ry="1" cx="15" cy="25"/> <ellipse rx="1" ry="1" cx="5" cy="34"/> <ellipse rx="1" ry="1" cx="0" cy="38"/> <ellipse rx="1" ry="1" cx="-5" cy="34"/> <ellipse rx="1" ry="1" cx="-15" cy="25"/> <line x1="0" y1="0" x2="0" y2="16"/> <line x1="15" y1="25" x2="0" y2="38"/> <line x1="0" y1="38" x2="-15" y2="25"/> </g> <g transform="translate(80)"> <ellipse rx="1" ry="1" cx="0" cy="0" /> <ellipse rx="1" ry="1" cx="0" cy="10"/> <ellipse rx="1" ry="1" cx="18" cy="36"/> <ellipse rx="1" ry="1" cx="0" cy="36"/> <ellipse rx="1" ry="1" cx="-18" cy="36" stroke="gray"/> <line x1="0" y1="0" x2="0" y2="10"/> <line x1="18" y1="36" x2="0" y2="36"/> <line x1="0" y1="36" x2="-18" y2="36" stroke="gray" stroke-dasharray="0.5"/> </g> <g transform="translate(120)"> <ellipse rx="1" ry="1" cx="0" cy="0" /> <ellipse rx="1" ry="1" cx="18" cy="36"/> <ellipse rx="1" ry="1" cx="0" cy="36"/> <ellipse rx="1" ry="1" cx="-18" cy="36" stroke="gray"/> <line x1="18" y1="36" x2="0" y2="36"/> <line x1="0" y1="36" x2="-18" y2="36" stroke="gray" stroke-dasharray="0.5"/> </g> </g> </g> <g font-size="6" transform="translate(-1.5,-4)"> <text x="-10" y="-8"># of unique points:</text> <text transform="translate( 0)">8</text> <text transform="translate( 40)">7</text> <text transform="translate( 80)">4</text> <text transform="translate(120)">3</text> </g> </svg>

如何在HTML中创build泪珠？

SVG方法：

基本的边界半径

问题的下降：

DROPLET：💧（ `💧` ）

黑滴：🌢（ `🌢` ）

HTMLcanvas

使用二次曲线

CSS版本

只有用CSS才能扩展一个textarea？

居中背景图片，使用CSS

使用Javascript更改选定文本的CSS

可以用css命令列表产生看起来像1.1,1.2,1.3（而不是只有1,2,3）的结果吗？

css单行或多行垂直alignment

如何点击button打印HTML内容，但不是页面？

如何取消一个子元素的不透明度？

100％宽度表溢出div容器

在CSS中使第一个字符大写

如何更改一个元素，而徘徊在另一个

如何在HTML中创build泪珠？

SVG方法：

基本的边界半径

问题的下降：

DROPLET：💧（ &#128167; ）

黑滴：🌢（ &#127778; ）

HTMLcanvas

使用二次曲线

CSS版本

只有用CSS才能扩展一个textarea？

居中背景图片，使用CSS

使用Javascript更改选定文本的CSS

可以用css命令列表产生看起来像1.1,1.2,1.3（而不是只有1,2,3）的结果吗？

css单行或多行垂直alignment

如何点击button打印HTML内容，但不是页面？

如何取消一个子元素的不透明度？

100％宽度表溢出div容器

在CSS中使第一个字符大写

如何更改一个元素，而徘徊在另一个

DROPLET：💧（ `💧` ）

黑滴：🌢（ `🌢` ）