我如何创建一个这样的形状显示在网页上?
我不想使用图像,因为它们在缩放时会变得模糊
我尝试用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了解更多信息。
在我看来,这种形状需要光滑的曲线,以确保曲线的连续性。
问题中的Drop:
对于刚才提到的下落,
平滑曲线不能被使用,因为控制点不会有相同的长度。但我们仍然需要使控制点与之前的控制点完全相反(180度),以确保曲线的完全连续性。下图说明了这一点:
注:红色曲线和蓝色曲线是两条不同的二次曲线。
Stroke-linejoin ="斜接",用于尖顶部分。
由于这个形状只使用连续的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 >
不过说实话,公认答案的曲线并不完全连续。
用于IE 5-8 (VML)
只能在IE 5-8下运行。VML使用的命令与SVG不同。如。它用v表示相对三次贝塞尔。
注意:这段代码也不能在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>
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很容易做到这一点,只需使用一个图像转换资源,如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>
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边框颜色和:在背景颜色之前。