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>
相关推荐
H0r1zon.10 分钟前
PinCopy:双击 Ctrl,把剪贴板「钉」在屏幕上
前端
kyriewen28 分钟前
大厂面试新规:不会用AI编程,直接挂
前端·面试·ai编程
努力找实习的前端小白36 分钟前
useImperativeHandle,useRef,forwardRef的协作关系
前端·面试
ZengLiangYi1 小时前
Fastify 加 Electron:把 Web 服务嵌进桌面应用
前端·javascript·后端
qq_2518364571 小时前
基于nodejs express +vue 天天商城系统设计与实现 (源码 文档)
前端·vue.js·express
胡萝卜术2 小时前
从零搭建生成式AI项目:OpenAI + Node.js 环境配置与密钥安全实践
前端·javascript·面试
lichenyang4532 小时前
鸿蒙实战:聊天记录持久化 · 历史会话页面 · 两个真实 Bug 的定位与修复
前端
天蓝色的鱼鱼2 小时前
前端也能写 AI Agent?用 Vercel AI SDK 十分钟跑通你的第一个智能助手
前端·ai编程
DevUI团队2 小时前
接口即代码:一个Skill轻松搞定类型定义、接口调用、Mock与调试
前端·agent·ai编程