用CSS绘制一个红色的爱心

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}

.heart::before,
.heart::after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background-color: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
}

.heart::after {
  left: 0;
  transform: rotate(45deg);
}

这段CSS代码会创建一个红色的心形。以下是它的工作原理：

• position: relative;: 这使得心形容器可以作为其伪元素（::before 和 ::after）的定位上下文。
• width 和 height: 这设置了心形容器的大小。你可以根据需要调整这些值。
• ::before 和 ::after: 这两个伪元素用于创建心形的两个半部分。
• content: "";: 这是必需的，即使伪元素为空。
• position: absolute;: 这允许我们相对于心形容器定位伪元素。
• left 和 top: 这设置了伪元素的初始位置。
• width 和 height: 这设置了每个半心的大小。
• background-color: red;: 这将心形设置为红色。
• border-radius: 50px 50px 0 0;: 这创建了圆角，形成了心形的顶部曲线。
• transform: rotate(-45deg);: 这将左半部分旋转 -45 度。
• transform: rotate(45deg);: 这将右半部分旋转 45 度。

要使用这段代码，你需要创建一个带有 heart 类的 HTML 元素：

<div class="heart"></div>

然后将 CSS 代码添加到你的样式表中，或者将其包含在 <style> 标签内。

你也可以通过调整 width 和 height 属性来改变心形的大小，并通过修改 background-color 属性来改变颜色。 例如，要创建一个更大的蓝色心形，你可以使用以下 CSS：

.heart {
  position: relative;
  width: 200px;
  height: 180px;
}

.heart::before,
.heart::after {
  /* ... (其他样式与上面相同) ... */
  background-color: blue;
}