如何在 HTML 中创建泪珠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30711203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I create a teardrop in HTML?
提问by Persijn
How do I create a shape like this to display on a webpage?
如何创建这样的形状以显示在网页上？
I don't want to use imagessince they would get blurry on scaling
我不想使用图像，因为它们在缩放时会变得模糊
I tried with CSS:
我尝试使用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：
<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?
有没有办法创建这个形状以便它可以在 HTML 页面中使用？
回答by web-tiki
SVG approach:
SVG 方法：
You can achieve the double curve easily with an inline SVGand the <path/>element instead of the <polygon/>element which doesn't allow curved shapes.
您可以使用内联 SVG和<path/>元素而<polygon/>不是不允许弯曲形状的元素轻松实现双曲线。
The following example uses the <path/>element with:
以下示例将<path/>元素用于：
- 2 quadratic bezier curve commandsfor the 2 top curves (lines beginning with
Q) - 1 arc commandfor 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 curveswith an SVG/CSS comparison. Some of the advantages of using SVG in this case are:
SVG 是制作这种双曲线形状的好工具。您可以通过 SVG/CSS 比较查看有关双曲线的这篇文章。在这种情况下使用 SVG 的一些优点是：
- 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)
- 曲线控制
- 填充控制（不透明度、颜色）
- 描边控制（宽度、不透明度、颜色）
- 代码量
- 时间建立和保持形状
- 可扩展
- 没有 HTTP 请求（如果像示例中那样使用内联）
Browser supportfor inline SVG goes back to Internet Explorer 9. See canIusefor more information.
浏览器对内联 SVG 的支持可以追溯到 Internet Explorer 9。有关详细信息，请参阅canIuse。
回答by Stewartside
Basic Border-Radius
基本边界半径
You can do this within CSS relatively easily using border-radius' and transforms. Your CSS was just a little bit out.
您可以使用 border-radius' 和 transforms 在 CSS 中相对轻松地做到这一点。你的 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>Advanced Border-Radius
高级边界半径
This will be very similar to above but gives it a bit more shape.
这将与上面的非常相似，但赋予它更多的形状。
.tear {
width: 50px;
height: 50px;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
border: 3px solid black;
transform: rotate(-45deg);
margin-top: 20px;
}<div class="tear"></div>回答by jbutler483
Your main issue with your CSS code was:
您的 CSS 代码的主要问题是：
- You used a different height than width
- You haven't rotated the correct angle size
- 您使用的高度与宽度不同
- 您没有旋转正确的角度大小
So, by 'fixing' these issues, you would generate:
因此，通过“修复”这些问题，您将生成：
.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>Please also note to save on CSS length, you could re-write your border-radius properties to:
另请注意，为了节省 CSS 长度，您可以将 border-radius 属性重写为：
border-radius: 50% 0 50% 50%;
this could be enhanced with pseudo elements as shown in this fiddle
这可以用伪元素来增强，如this fiddle所示
Alternatives
备择方案
I found thisby Vinay Challuruon codepen.
我在codepen上通过Vinay Challuru找到了这个。
Please note that with the logic here, I was able to create the SVGto nearly any possible build shape/etc. For example, a quick output was:
请注意，通过这里的逻辑，我能够将SVG创建为几乎任何可能的构建形状/等。例如，一个快速的输出是：
<svg viewBox='0 0 400 400'>
<path fill="none" stroke="#333" stroke-width="5" d="M200,40 C200,115 280,180 280,240 A80,80,0 0,1,120,240 C120,180 200,115 200,40" stroke-linejoin='miter'></path>
</svg>It's using an SVG and allows you to alter the shape in multiple ways, having the ability to alter its shape to the desired result:
它使用 SVG 并允许您以多种方式更改形状，并能够将其形状更改为所需的结果：
var SVG = function() {
this.element = document.getElementsByTagName("svg")[0];
this.namespace = "http://www.w3.org/2000/svg";
this.width = 400;
this.height = 400;
}
/****Let's initialise our SVG ready to draw our shape****/
var svg = new SVG();
/****This sets up the user interface - we've included the script for this as an external library for the codepen****/
var gui = new dat.GUI();
/****Here's where the code to create the shape begins!****/
var Teardrop = function() {
this.x = svg.width * 0.5;
this.y = svg.height * 0.1;
this.width = svg.width * 0.4;
this.triangleHeight = svg.height * 0.5;
this.yCP1 = svg.height * 0.2;
this.yCP2 = svg.height * 0.45;
this.element = null;
this.ctrlPoints = [];
this.anchors = [];
this.fill = "none";
this.stroke = "#333";
this.strokeWidth = 2;
this.showCtrlPoints = true;
this.init();
}
Teardrop.prototype.init = function() {
this.element = document.createElementNS(svg.namespace, "path");
svg.element.appendChild(this.element);
this.element.setAttribute("fill", this.fill);
this.element.setAttribute("stroke", this.stroke);
this.element.setAttribute("stroke-width", this.strokeWidth);
for (var i = 0; i < 3; i++) {
this.ctrlPoints.push(document.createElementNS(svg.namespace, "circle"));
svg.element.appendChild(this.ctrlPoints[i]);
this.ctrlPoints[i].setAttribute("fill", this.fill);
this.ctrlPoints[i].setAttribute("stroke", 'red');
this.ctrlPoints[i].setAttribute("stroke-width", 1);
this.anchors.push(document.createElementNS(svg.namespace, "line"));
svg.element.appendChild(this.anchors[i]);
this.anchors[i].setAttribute("stroke-width", 1);
this.anchors[i].setAttribute("stroke", this.stroke);
this.anchors[i].setAttribute("stroke-dasharray", "3,2");
}
this.draw();
}
Teardrop.prototype.draw = function() {
this.radius = this.width / 2;
path = [
"M", this.x, ",", this.y,
"C", this.x, ",", this.yCP1, " ", this.x + this.width / 2, ",", this.yCP2, " ", this.x + this.width / 2, ",", this.y + this.triangleHeight,
"A", this.radius, ",", this.radius, ",", "0 0,1,", this.x - this.width / 2, ",", this.y + this.triangleHeight,
"C", this.x - this.width / 2, ",", this.yCP2, " ", this.x, ",", this.yCP1, " ", this.x, ",", this.y
];
this.element.setAttribute("d", path.join(""));
cpCoords = [];
cpCoords[0] = [this.x, this.yCP1];
cpCoords[1] = [this.x - this.width / 2, this.yCP2];
cpCoords[2] = [this.x + this.width / 2, this.yCP2];
anchorCoords = [];
anchorCoords[0] = [this.x, this.y];
anchorCoords[1] = [this.x - this.width / 2, this.y + this.triangleHeight];
anchorCoords[2] = [this.x + this.width / 2, this.y + this.triangleHeight];
for (var i = 0; i < 3; i++) {
this.ctrlPoints[i].setAttribute("cx", cpCoords[i][0]);
this.ctrlPoints[i].setAttribute("cy", cpCoords[i][1]);
this.anchors[i].setAttribute("x1", cpCoords[i][0]);
this.anchors[i].setAttribute("x2", anchorCoords[i][0]);
this.anchors[i].setAttribute("y1", cpCoords[i][1]);
this.anchors[i].setAttribute("y2", anchorCoords[i][1]);
if (this.showCtrlPoints) {
this.ctrlPoints[i].setAttribute("r", 2);
this.anchors[i].setAttribute("stroke-width", 1);
} else {
this.ctrlPoints[i].setAttribute("r", 0);
this.anchors[i].setAttribute("stroke-width", 0);
}
}
}
var teardrop = new Teardrop();
gui.add(teardrop, 'triangleHeight', 0, svg.height * 0.75);
gui.add(teardrop, 'width', 0, 200);
gui.add(teardrop, 'yCP1', 0, svg.height);
gui.add(teardrop, 'yCP2', 0, svg.height);
gui.add(teardrop, 'showCtrlPoints', 0, svg.height);
for (var i in gui.__controllers) {
gui.__controllers[i].onChange(function() {
teardrop.draw();
});
}html,
body {
height: 100%;
}
svg {
display: block;
margin: 0 auto;
background: url('http://unitedshapes.com/images/graph-paper/graph-paper.png');
}<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<svg width='400px' height='400px'></svg>DisclaimerI did not write the above pen, only sourced it.
免责声明我没有写上面的笔，只是来源。
CSS Version
CSS 版本
Although this is far from complete, you may also be able to generate this shape using CSS.
虽然这还远未完成，但您也可以使用 CSS 生成此形状。
.tear{
height:200px;
width:200px;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 29%,rgba(0,0,0,1) 30%,rgba(0,0,0,1) 100%);
border-radius:50%;
margin:120px;
position:relative;
}
.tear:before{
content:"";
position:absolute;
top:-70%;left:0%;
height:100%;width:50%;
background: radial-gradient(ellipse at -50% -50%, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 100%);
}
.tear:after{
content:"";
position:absolute;
top:-70%;left:50%;
height:100%;width:50%;
background: radial-gradient(ellipse at 150% -50%, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 100%);
}<div class="tear"></div>SVG Version
SVG 版本
I should know that SVG should be at the top of this answer, however, I like a challenge and so here is an attempt with SVG.
我应该知道 SVG 应该在这个答案的顶部，但是，我喜欢挑战，所以这里尝试使用 SVG。
svg {
height: 300px;
}
svg path {
fill: tomato;
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100">
<path d="M49.015,0.803
c-0.133-1.071-1.896-1.071-2.029,0
C42.57,36.344,20,43.666,20,68.367
C20,83.627,32.816,96,48,96
s28-12.373,28-27.633
C76,43.666,53.43,36.344,49.015,0.803z
M44.751,40.09
c-0.297,1.095-0.615,2.223-0.942,3.386
c-2.007,7.123-4.281,15.195-4.281,24.537
c0,5.055-2.988,6.854-5.784,6.854
c-3.189,0-5.782-2.616-5.782-5.831
c0-11.034,5.315-18.243,10.005-24.604
c1.469-1.991,2.855-3.873,3.983-5.749
c0.516-0.856,1.903-0.82,2.533,0.029
C44.781,39.116,44.879,39.619,44.751,40.09z"/>
</svg>Altering the pathvalues, you would be able to alter the shape of your teardrop design.
改变这些path值，您将能够改变泪滴设计的形状。
回答by Max Payne
IMO this shape requires smooth curve-tobeziers to ensure continuity of the curve.
IMO 这种形状需要平滑的曲线到贝塞尔曲线以确保曲线的连续性。
The Drop in question :
有问题的掉落：
For the drop in question,
对于有问题的下降，
- smooth curves can't be used, as control points wont be of same length. But we still need to make the control points lie exactly opposite (180 deg) to the previous control points, to ensure full continuity of curveThe picture given below illustrates this point :
- 不能使用平滑曲线，因为控制点的长度不同。但是我们仍然需要使控制点与之前的控制点完全相反（180 度），以确保曲线的完全连续性下图说明了这一点：
Note: Red and blue curves are two different quadratic curves.
注意：红色和蓝色曲线是两条不同的二次曲线。
stroke-linejoin="miter", for the pointed top part.AS this shape only uses successive
ccommands, we can omit it.
stroke-linejoin="miter", 用于尖顶部分。由于这个形状只使用连续的
c命令，我们可以省略它。
Here's the final snippet:
这是最后的片段：
<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>TBH though, accepted answer's curves are not quite continuous.
TBH 虽然，接受的答案的曲线并不完全连续。
For IE 5-8 (VML)
对于 IE 5-8 (VML)
Only works in IE 5-8. VMLuses different commands than SVG. Eg. it uses v for relative cubic beziers.
仅适用于 IE 5-8。VML使用与SVG不同的命令。例如。它使用v 表示相对三次贝塞尔曲线。
Note:This snippet won't run in IE 5-8 too. You need to create an html file and run it directly in the browser.
注意：此代码段也不会在 IE 5-8 中运行。您需要创建一个 html 文件并直接在浏览器中运行它。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style> v\:* { behavior: url(#default#VML); }
</style >
</head>
<body>
<div style="width:240; height:320;">
<v:shape coordorigin="0 0" coordsize="12 16" fillcolor="white" strokecolor="black" strokewidth="1"
strokeweight="5" style="width:240; height:320"
path="M 6 1 v -2 3 -5 5 -5 9
0 7 10 7 10 0
0 -4 -3 -6 -5 -9 x e">
</v:shape>
</div>
</body>
</html>
回答by Gnubie
Or if your viewers' font supports it, use the Unicode characters
或者，如果您的观众的字体支持它，请使用 Unicode 字符
DROPLET: (💧)
水滴：（💧）
or
或者
BLACK DROPLET: (🌢)
小黑点：（🌢）
Scale accordingly!
相应地缩放！
回答by Djave
I'd personally use an SVG for this. You can create SVGs in most vector graphics software. I'd recommend:
我个人会为此使用 SVG。您可以在大多数矢量图形软件中创建 SVG。我建议：
I have made one below that is a tracing of your shape in 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>回答by Harry
HTML Canvas
HTML 画布
This is an option uncovered in this thread so far. The commands used for Canvas drawings are very similar to SVG (and web-tiki deserves the credits for the base idea used in this answer).
到目前为止，这是该线程中未发现的一个选项。用于 Canvas 绘图的命令与 SVG 非常相似（并且 web-tiki 值得称赞此答案中使用的基本思想）。
The shape in question can be created either using canvas' own curve commands (Quadratic or Bezier) or the Path API. The answer contains examples for all three methods.
可以使用画布自己的曲线命令（Quadratic 或 Bezier）或 Path API 创建有问题的形状。答案包含所有三种方法的示例。
The browser support for Canvas is quite good.
浏览器对 Canvas 的支持非常好。
Using Quadratic Curves
使用二次曲线
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>Below is an advanced versionwith gradient fill and shadows. I have also included a hovereffect on the shape to illustrate one drawback of Canvas when compared to SVG. Canvas is raster (pixel) based and hence would look blurred/pixelated when scaled beyond a certain point. The only solution to that would be to repaint the shape on every browser resize which is an overhead.
下面是带有渐变填充和阴影的高级版本。我还包括了hover对形状的影响，以说明与 SVG 相比 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.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>Using Bezier Curves
使用贝塞尔曲线
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>Using Path API
使用路径 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>Note:As mentioned in my answere here, the Path API is not yet supported by IE and Safari.
注意：正如我在此处的回答中所述，IE 和 Safari 尚不支持 Path API。
Further reading:
进一步阅读：
回答by Luke Shimkus
I also found thison Codepenmade by user Ana Tudorusing CSS and the box-shadowstyle and parametric equations. Very simple, very little code. And many browserssupport the CSS3 Box-shadow style:
我还在用户Ana Tudor使用 CSS 以及样式和参数方程制作的Codepen上找到了这个。非常简单，代码很少。并且很多浏览器都支持 CSS3 Box-shadow 样式：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>回答by Ruddy
CSS Version
CSS 版本
As there are a fair few answers here I thought why not add to it with another method. This is using both HTMLand CSSto create the teardrop.
由于这里有很多答案，我想为什么不使用另一种方法添加它。这是使用HTML和CSS来创建泪珠。
This will allow you to change the colour of the border and background of the teardrop and also re-size the top part of it.
这将允许您更改泪珠的边框和背景的颜色，并重新调整其顶部的大小。
Using a single divwe can create a circle with borderand border-radius. Then using pseudo elements (:before& :after) we create a CSS trianglemore here, this will act as the tip of the teardrop. Using the :beforeas the border we place :afteron top with a smaller size and the desired background colour.
使用单个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>Here is a demo of the teardrop with a background colour
这是带有背景颜色的泪珠的演示
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>It is as simple as putting a background colour onto the divand changing :afterbottom-bordercolour to the same. To change the border you will need to change divborder colour and :beforebackground colour too.
它就像将背景颜色放在上面div并将:afterbottom-border颜色更改为相同一样简单。要更改边框，您还需要更改div边框颜色和:before背景颜色。
回答by Anonymous
It is quite easy to do this with SVG by just using an image conversion resource such as http://image.online-convert.com/convert-to-svg, which was used to create the following:
通过使用诸如http://image.online-convert.com/convert-to-svg 之类的图像转换资源，使用 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>