CSS画心形的三种方法，超级简单

最新推荐文章于 2025-02-25 13:45:39 发布

王同学要努力

最新推荐文章于 2025-02-25 13:45:39 发布

阅读量1.2w

点赞数 69

分类专栏：【CSS3】文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_46374969/article/details/119233982

版权

【CSS3】专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何使用CSS通过一个div及其伪元素创建心形图案，包括单个心形和全屏心形的布局技巧。通过改变元素的形状、位置和旋转角度，实现了视觉效果。同时，文章引用了周星驰的台词，强调用心观察世界的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS画心形的三种方法，超级简单

一、一颗div一颗心

用一个div画出一个心，核心的方法就是使用伪元素

首先，我们在页面上先写出一个div

使用CSS，将这个div变为一个橘红色的正方形：

在这里插入图片描述

接着我们利用元素的两个伪元素:before和:after，画出一个蓝色的圆和一个黄色的圆，并且将它们的圆心分别定位在正方形的上边和右边。

在这里插入图片描述

再来，将刚刚实现的两个圆变成和正方形一样的颜色

在这里插入图片描述

最后，将元素div旋转45度，我们要的心形就实现了！就是这么简单

在这里插入图片描述

全部代码如下，拿去跟女朋友表白吧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: relative;
            top: 100px;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: tomato;
        }
        
        div:before {
            content: "";
            position: absolute;
            top: -50px;
            left: 0;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: blue;
        }
        
        div:after {
            content: "";
            position: absolute;
            top: 0px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 50%;
        }
        
        div:before {
            background-color: tomato;
        }
        
        div:after {
            background-color: tomato;
        }
        
        div {
            position: relative;
            top: 100px;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: tomato;
            transform: rotate(-45deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>