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>
相关推荐
mayaairi1 小时前
Vue2 生命周期完全指南:从创建到销毁的8个钩子函数
前端·javascript·vue.js
xy34532 小时前
axure9.0 如何打造一个计时器(简单版)
前端·ui·html·axure·原型·产品设计
IMPYLH3 小时前
HTML 的 <pre> 元素
前端·javascript·html
tsumikistep4 小时前
【前端】Vue + Axios 跨域问题实战:7070 代理转发 8080 + 401 报错分析(黑马外卖)
前端·javascript·vue.js
lichenyang4534 小时前
鸿蒙首页从等高商品 Grid 到双列瀑布流:同一张图也能做出小红书式浏览节奏
前端
里欧跑得慢4 小时前
Flutter主题与样式详解
前端·css·flutter·web
toooooop84 小时前
智慧文旅数字人体验平台demo html
css·css3
计算机魔术师4 小时前
TPU推理性价比翻50%,NVIDIA的护城河要见底了?
前端
IT_陈寒4 小时前
Python的多线程就是个假把式,我算是体验到了
前端·人工智能·后端
OpenTiny社区5 小时前
【直播分享】GenUI SDK 技术公开课第二讲 | GenuiChat 核心配置深度解析
前端·github