返回

用CSS绘制爱心图案

前端


/* 创建SVG容器 */
.love {
  width: 200px;
  height: 200px;
  display: block;
  margin: auto;
}

/* 定义爱心路径 */
.love path {
  fill: #ff0000;
}

/* 心型路径数据 */
.love path[d] {
  d: M 100 150
     A 75 75 0 1 0 100 25
     A 75 75 0 1 0 100 150 z;
}

以下是完整的HTML代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div class="love">
    <svg>
      <path d="M 100 150
           A 75 75 0 1 0 100 25
           A 75 75 0 1 0 100 150 z" />
    </svg>
  </div>
</body>
</html>

尽管有很多方法可以创建爱心图案，但 CSS 提供了一种简单而优雅的方式。在本文中，我们将逐步介绍如何使用 CSS 绘制爱心图案。

首先，我们需要创建一个 SVG 容器来容纳爱心图案。SVG 是一种基于 XML 的矢量图形格式，非常适合创建可缩放的图形。

.love {
  width: 200px;
  height: 200px;
  display: block;
  margin: auto;
}

接下来，我们需要定义爱心图案的路径。路径是一个连接一系列点的线，它可以用来创建各种形状。

.love path {
  fill: #ff0000;
}

现在，我们需要将爱心路径数据添加到 SVG 容器中。路径数据是一个字符串，它包含了路径的形状和位置信息。

.love path[d] {
  d: M 100 150
     A 75 75 0 1 0 100 25
     A 75 75 0 1 0 100 150 z;
}

最后，我们需要运行代码以查看爱心图案。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div class="love">
    <svg>
      <path d="M 100 150
           A 75 75 0 1 0 100 25
           A 75 75 0 1 0 100 150 z" />
    </svg>
  </div>
</body>
</html>