我如何在HTML中创建一个泪滴?

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

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

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

它确实有了形状，但底部没有弯曲。

有没有一种方法来创建这个形状，以便它可以在HTML页面中使用?

当前回答

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

问题中的Drop:

对于刚才提到的下落，

平滑曲线不能被使用，因为控制点不会有相同的长度。但我们仍然需要使控制点与之前的控制点完全相反(180度)，以确保曲线的完全连续性。下图说明了这一点:

注:红色曲线和蓝色曲线是两条不同的二次曲线。

Stroke-linejoin ="斜接"，用于尖顶部分。由于这个形状只使用连续的c命令，我们可以省略它。

这是最后一个片段:

不过说实话，公认答案的曲线并不完全连续。

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

2015-06-09 05:27:11

其他回答

基本这个特性

你可以在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 >

2015-06-08 14:05:00

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

2015-06-10 08:03:17

下面是四个逐步简化的SVG泪滴形状:

2017-02-08 19:47:30

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

问题中的Drop:

对于刚才提到的下落，

注:红色曲线和蓝色曲线是两条不同的二次曲线。

Stroke-linejoin ="斜接"，用于尖顶部分。由于这个形状只使用连续的c命令，我们可以省略它。

这是最后一个片段:

不过说实话，公认答案的曲线并不完全连续。

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

2015-06-09 05:27:11

你的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，并允许您以多种方式更改形状，能够将其形状更改为所需的结果:

免责声明上述钢笔不是我写的，只是来源。

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>

改变路径值，你将能够改变你的泪滴设计的形状。

2015-06-08 14:11:02

我如何在HTML中创建一个泪滴?

推荐文章

最新文章

标签