我如何创建一个这样的形状显示在网页上?
我不想使用图像，因为它们在缩放时会变得模糊
我尝试用CSS:
.tear { 显示:inline-block; 变换:旋转(-30度); 边框:5px纯绿色; 宽度:50 px; 身高:100 px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; ｝ < div class = "扯" > < / div >
结果真是搞砸了。
然后我尝试用SVG:
<svg viewBox="0 100 100"> <多边形点="50,0 100,70 50,100 0,70"/> < / svg >
它确实有了形状，但底部没有弯曲。
有没有一种方法来创建这个形状，以便它可以在HTML页面中使用?
当前回答
SVG的方法:
您可以使用内联SVG和<path/>元素而不是<polygon/>元素轻松实现双曲线，因为<polygon/>元素不允许弯曲形状。
下面的例子使用<path/>元素:
2个二次bezier曲线命令用于2条顶部曲线(以Q开头的行) 1个arc命令用于最下面的那个(以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 Q13.5 6.8 15 3z" /> < / svg >
SVG是制作这种双曲线形状的好工具。您可以通过SVG/CSS比较查看这篇关于双曲线的文章。在这种情况下使用SVG的一些优点是:
曲线控制 填充控制(不透明度，颜色) 描边控制(宽度，不透明度，颜色) 代码数量 是时候建立和维护形状了 可伸缩的 没有HTTP请求(如果像示例中那样内联使用)
浏览器对内联SVG的支持可以追溯到Internet Explorer 9。参见canIuse了解更多信息。
其他回答
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边框颜色和:在背景颜色之前。
基本这个特性
你可以在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 >
你的CSS代码的主要问题是:
你用的高度和宽度不同 你没有旋转正确的角度大小
所以，通过“修复”这些问题，你将生成:
.tear { 显示:inline-block; 变换:旋转(-45度); 边框:5px纯绿色; 宽度:100 px; 身高:100 px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; ｝ /***仅用于演示***/ .tear { 保证金:50 px; ｝ < div class = "扯" > < / div >
请注意，为了节省CSS的长度，你可以重写你的border-radius属性:
border-radius: 50% 0 50% 50%;
这可以通过伪元素来增强，如图所示
选择
我在codeen上找到了Vinay Challuru写的。
请注意，根据这里的逻辑，我可以为几乎任何可能的构建形状等创建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 >
它使用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>
免责声明上述钢笔不是我写的，只是来源。
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版本
我应该知道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>
改变路径值，你将能够改变你的泪滴设计的形状。
下面是四个逐步简化的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帆布
这是到目前为止在这篇文章中提到的一个选项。用于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之间的区别是什么?
