CSS版本

由于这里有相当多的答案，我想为什么不添加到另一种方法。这是使用HTML和CSS来创建泪滴。

这将允许你改变泪滴的边界和背景的颜色，也可以调整它的顶部的大小。

使用一个div，我们可以创建一个带有border和border-radius的圆。然后使用伪元素(:before &:after)我们在这里创建一个CSS三角形，这将作为泪滴的尖端。使用: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>

下面是一个带有背景色的泪滴演示

div { width: 100px; height: 100px; border-radius: 50%; border: 4px solid; background: red; margin: 80px; 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: 100px solid black; top: -70px; } div:after { border-left: 46px solid transparent; border-right: 46px solid transparent; border-bottom: 96px solid red; top: -66px; left: 0; right: 0; margin: auto; z-index: 1; } <div></div>

这很简单，把一个背景颜色到div和改变:后底边颜色相同。要改变边框，你需要改变div边框颜色和:在背景颜色之前。

HTML帆布

这是到目前为止在这篇文章中提到的一个选项。用于Canvas绘图的命令与SVG非常相似(web-tiki在这个回答中使用的基本思想值得赞扬)。

所讨论的形状可以使用canvas自己的曲线命令(二次曲线或Bezier曲线)或路径API创建。答案包含了所有三种方法的示例。

浏览器对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>

下面是带有渐变填充和阴影的高级版本。我还在形状上添加了悬停效果，以说明Canvas与SVG相比的一个缺点。画布是基于光栅(像素)的，因此当缩放超过某一点时看起来会模糊/像素化。唯一的解决方案是在每次浏览器调整大小时重新绘制形状，这是一种开销。

window.onload = function() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); var lineargradient = ctx.createRadialGradient(135, 95, 1, 135, 95, 10); lineargradient.addColorStop(0, 'white'); lineargradient.addColorStop(1, '#77CCEE'); 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 = '#333'; ctx.lineWidth = 3; ctx.fillStyle = lineargradient; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(50, 50, 50, 0.5)"; ctx.stroke(); ctx.fill(); } } canvas { margin: 50px; height: 100px; width: 200px; transform: scale(1.5); } /* Just for demo */ body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } canvas{ transition: all 1s; } canvas:hover{ transform: scale(2); } <canvas id='canvas'></canvas>

使用贝塞尔曲线

window.onload = function() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); var lineargradient = ctx.createRadialGradient(135, 95, 1, 135, 95, 10); lineargradient.addColorStop(0, 'white'); lineargradient.addColorStop(1, '#77CCEE'); ctx.beginPath(); ctx.lineJoin = 'miter'; ctx.arc(120, 88, 35, 5.74, 3.66, false); ctx.bezierCurveTo(100, 55, 122, 27.5, 120, 20); ctx.bezierCurveTo(122, 27.5, 121, 31.5, 150, 70); ctx.closePath(); ctx.strokeStyle = 'rgba(109,195,250,0.2)'; ctx.lineWidth = 1; ctx.fillStyle = lineargradient; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(50, 50, 50, 0.5)"; ctx.stroke(); ctx.fill(); } } canvas { margin: 75px; height: 300px; width: 300px; transform: scale(1.5); } body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } <canvas id='canvas' height='300' width='300'></canvas>

使用Path API

window.onload = function() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.lineJoin = 'miter'; var p = new Path2D("M120 20 Q117.5 30 146 68 A34 34 0 1 1 92 68 Q117.5 35 120 20z"); ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.fillStyle = '#77CCEE' ctx.stroke(p); ctx.fill(p); } } 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>

注意:正如我在回答中提到的，IE和Safari还不支持Path API。

进一步阅读:

考虑svg而非Canvas的7大理由 HTML5 Canvas vs. SVG:选择最佳工具 SVG和HTML5 Canvas之间的区别是什么?

我还在用户Ana Tudor使用CSS和盒影风格和参数方程制作的Codepen上发现了这一点。非常简单，代码非常少。许多浏览器都支持CSS3框影样式:

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中使用border-radius'和transforms相对容易地做到这一点。你的CSS有点过时了。

.tear { 宽度:50 px; 高度:50 px; 边界半径:0 50% 50% 50% 50%; 边框:3px纯黑色; 变换:旋转(45度); margin-top: 20 px; ｝ < div class = "扯" > < / div >

先进的这个特性

这将非常类似于上面的，但给它更多的形状。

.tear { 宽度:50 px; 高度:50 px; 边界半径:80% 0 55% 50% / 55% 0 80% 50%; 边框:3px纯黑色; 变换:旋转(-45度); margin-top: 20 px; ｝ < div class = "扯" > < / div >

使用SVG很容易做到这一点，只需使用一个图像转换资源，如http://image.online-convert.com/convert-to-svg，它被用来创建以下内容:

<?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>

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

之 草图 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>