我如何创建一个这样的形状显示在网页上?
我不想使用图像，因为它们在缩放时会变得模糊
我尝试用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中使用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和<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了解更多信息。
下面是四个逐步简化的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>
我还在用户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>
