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

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

2017-02-08 19:47:30

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

问题中的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

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

2015-06-08 14:12:18

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

2017-02-08 19:47:30

基本这个特性

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

我个人会使用SVG。您可以在大多数矢量图形软件中创建svg。我建议:

之草图 Adobe Illustrator