html css实现爱心

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          /* 爱心 */
          .love {
            position: relative;
            top: 100px;
            left: 100px;
            width: 60px;
            height: 60px;
            background-color: tomato;
            transform: rotate(-45deg);
        }
        .love:before {
            content: "";
            position: absolute;
            top: -30px;
            left: 0;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: tomato;
        }
        
        .love:after {
            content: "";
            position: absolute;
            top: 0px;
            left: 30px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <div class="love"></div>
</body>
</html>
相关推荐
ziqi52216 分钟前
第二十五天笔记
前端·chrome·笔记
GISer_Jing21 分钟前
Memory、Rules、Skills、MCP如何重塑AI编程
前端·人工智能·aigc·ai编程
xcs1940522 分钟前
前端 项目构建问题 \node_modules\loader-runner\lib\loadLoader.js
开发语言·前端·javascript
广然23 分钟前
EVE-NG 镜像管理工具 1.1 Web 版本正式发布!
运维·服务器·前端
Data_Journal35 分钟前
【无标题】
大数据·服务器·前端·数据库·人工智能
我爱加班、、1 小时前
new Map()+Array.from()整理elementPlus的级联器数据
linux·前端·javascript
Hx_Ma161 小时前
Map集合的5种遍历方式
java·前端·javascript
css趣多多1 小时前
render函数
前端·javascript·vue.js
web打印社区1 小时前
前端开发实现PDF打印需求:从基础方案到专业解决方案
前端·vue.js·react.js·electron·pdf
时光追逐者1 小时前
使用 MWGA 帮助 7 万行 Winforms 程序快速迁移到 WEB 前端
前端·c#·.net