如何在HTML中创建一个水滴形状

使用HTML和CSS创建形状是一项相当简单的任务，除非形状非常复杂。 <div> 类和 CSS 样式属性如高度、宽度和边框可以帮助我们创建正方形、矩形、圆形、三角形等形状。

这是一个只使用HTML和CSS创建正方形形状的简单例子。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            margin:30px;
        }
        .square {
            height: 75px;
            width: 75px;
            background-color: darkcyan;
        }
    </style>
</head>
<body>
    <div class="square"></div>
</body>
</html>

大多数形状，特别是那些有明确边缘的形状，可以使用纯CSS轻松创建。然而，对于复杂的形状来说，这是一项相当困难的任务，因为它们没有明确的结构。

在本教程中，我们将看到使用两种方法创建 泪滴形状 的过程- CSS 和 SVG 。

使用CSS

CSS的 border-radius 和 transform 属性使得创建复杂形状相对容易。

元素的圆角半径由border-radius属性指定。该属性可以根据要求有一到四个值。这些值决定了左上角、右上角、左下角和右下角的半径。

transform属性可以用来在2D或3D中对元素进行变换。我们可以使用此属性来旋转、缩放、移动、倾斜等操作。

示例

在以下示例中，我们将使用CSS的border-radius和transform属性来创建一个泪滴形状。

<!DOCTYPE html>
<html>
<head>
    <title>
        How to Create a Teardrop in HTML?
    </title>
    <style>
        body{
            margin:50px;
        }
        .tearDrop {
           width: 80px;
           height: 80px;
           border-radius: 0 50% 50% 50%;
           border: 5px solid purple;
           transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="tearDrop"></div>
</body>
</html>

使用SVG

SVG代表可伸缩矢量图形。它们是一种基于XML的标记语言，用于描述用于Web的二维矢量图形。SVG文件中的每个元素和属性都可以进行动画处理。SVG是W3C的推荐标准，与其他W3C标准（如DOM和XSL）集成。SVG图像及其相关行为在XML文本文件中定义。

使用SVG而不是其他图像格式（如JPEG和GIF）的好处如下：

可以使用任何文本编辑器创建和编辑SVG图像。
可以对SVG图像进行索引、搜索、脚本化和压缩。
可以对SVG图像进行缩放。
可以对SVG图像进行索引、搜索、脚本化和压缩。
可以对SVG图像进行缩放。
SVG图形在缩放或调整大小时不会失去质量。
SVG是一种开放标准，SVG文件是完全由XML组成的。

HTML的元素用作SVG图形的容器。SVG支持各种路径、框、圆、文本和图形图像绘制方法。下面的代码片段解释了SVG的概念和应用。

创建一个圆

这里的’cx’和’cy’定义了圆的中心的x和y坐标，’r’指定了圆的半径。stroke和stroke-width属性确定形状的轮廓如何显示，fill属性指的是形状内部的颜色。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

示例

此示例演示了使用SVG来获得比CSS方法更好的眼泪形状。

<!DOCTYPE html>
<html>
  <head>
    <title>
        How to Create a Teardrop in HTML?
    </title>
    <style>
        body{
            margin:30px;
        }
    </style>
  </head>
  <body>
    <svg width="25%" viewbox="0 0 30 42">
      <path fill="lavenderblush" stroke="#000" stroke-width="1.5"
        d="M15 3
        Q16.5 6.8 25 18
        A12.8 12.8 0 1 1 5 18
        Q13.5 6.8 15 3z" />
    </svg>
  </body>
</html>

要制作平滑的曲线，我们可以使用三种命令中的一种。这里有两条贝塞尔曲线和一条”arc”。有很多贝塞尔曲线，但是只有两种在<path>元素中可用：三次曲线（C）和二次曲线（Q）。

在我们的示例中，我们使用了二次曲线而不是三次曲线。我们只需要一个控制点来指定曲线在起点和终点处的斜率。弧线也可用于制作圆或椭圆的片段。

在这些情况下，SVG提供了曲线控制、填充控制、描边控制、构建和维护形状的时间、无需HTTP请求等优势。