如何在 HTML 中创建泪珠形?

htmlweb developmentfront end technology更新于 2025/3/26 18:20:17

使用 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 属性指定。此属性可以有 1 到 4 个值，具体取决于需求。这些值分别决定了左上角、右上角、左下角和右下角的半径。

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 文本文件中定义。

与其他图像格式(例如 JPEG 和 GIF)相比，使用 SVG 具有以下优势:

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

HTML

创建圆形

这里的"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>

为了绘制平滑曲线，我们可以使用以下三个命令之一。这里有两条贝塞尔曲线和一条"圆弧"。贝塞尔曲线有很多种，但在元素中只有两条可用:三次曲线 (C) 和二次曲线 (Q)。

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

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