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>
相关推荐
Trae1ounG4 小时前
Vue生命周期
前端·javascript·vue.js
程序员小李白4 小时前
js数据类型详细解析
前端·javascript·vue.js
weixin_462446234 小时前
Python用Flask后端解析Excel图表,Vue3+ECharts前端动态还原(附全套代码)
前端·python·flask·echats
满栀5855 小时前
jQuery 递归渲染多级树形菜单
前端·javascript·jquery
闲蛋小超人笑嘻嘻5 小时前
Flexbox 属性总结
前端·css
TOPGUS5 小时前
谷歌将移除部分搜索功能:面对AI时代的一次功能精简策略
前端·人工智能·搜索引擎·aigc·seo·数字营销
运筹vivo@5 小时前
攻防世界: ics-05
前端·web安全·php
不思念一个荒废的名字5 小时前
【黑马JavaWeb+AI知识梳理】Web前端开发 - Vue3 / ElementPlus
前端
月明长歌5 小时前
Selenium中隐式等待(Implicit Wait)和显式等待(Explicit Wait)的区别
前端·javascript·selenium