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>