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>
相关推荐
小明记账簿8 分钟前
前端读取与导出XLSX文件实战指南(React+Ant Design)
前端·react.js·前端框架
打小就很皮...9 分钟前
前端 Word 导出:自定义页眉表格的实现方案
前端·word·react·页眉设置
CodeCraft Studio10 分钟前
国产化Word处理组件Spire.DOC教程:通过Python将HTML转换为TXT文本
python·html·word·python编程·spire.doc·html转txt
JarvanMo20 分钟前
8 个你可能忽略了的 Flutter 小部件(四)
前端
学Linux的语莫22 分钟前
Vue前端知识
前端·javascript·vue.js
BUG创建者22 分钟前
thee.js完成线上展厅demo
开发语言·前端·javascript·css·html·css3·three.js
LYFlied26 分钟前
前端开发者需要掌握的编译原理相关知识及优化点
前端·javascript·webpack·性能优化·编译原理·babel·打包编译
BlackWolfSky26 分钟前
ES6 学习笔记3—7数值的扩展、8函数的扩展
前端·javascript·笔记·学习·es6
未来之窗软件服务27 分钟前
幽冥大陆(四十四)源码找回之Vue——东方仙盟筑基期
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·源码提取·源码丢失