我如何创建一个这样的形状显示在网页上?

我不想使用图像,因为它们在缩放时会变得模糊

我尝试用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 >

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边框颜色和:在背景颜色之前。

在我看来,这种形状需要光滑的曲线,以确保曲线的连续性。

问题中的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泪滴形状:

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