用CSS绘制一个红色的爱心

在前端开发中，我们可以使用纯CSS来绘制一个红色的爱心。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红色爱心</title>
<style>
  .heart {
    position: relative;
    width: 100px;
    height: 90px;
  }

  .heart::before,
  .heart::after {
    position: absolute;
    content: "";
    top: 40px;
    width: 52px;
    height: 80px;
    border-radius: 50px 50px 0 0;
    background: red;
  }

  .heart::before {
    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }

  .heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }
</style>
</head>
<body>
  <div class="heart"></div>
</body>
</html>

这段代码创建了一个名为 .heart 的 div，并使用 ::before 和 ::after 伪元素来绘制爱心的两个半圆形部分。通过调整 width、height、border-radius 和 transform 属性，我们可以得到所需的心形形状。最后，我们将背景颜色设置为红色来完成爱心的绘制。

posted @ 2025-01-15 06:04  王铁柱6  阅读(58)  评论(0)    收藏  举报