CSS 是前端開發不可缺少的技術之一，除了常規的布局樣式，還可以用它來畫圖形。今天我們來學習一下如何用 CSS 來畫愛心圖。

.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

首先，我們需要一個指定大小的容器，我們給它取名為 .heart，并設置它的寬度為 100px，高度為 90px。這個容器就相當于畫布，我們將在其中繪制出愛心圖案。

接下來，我們使用 :before 和 :after 偽元素來畫出左右兩側的半圓形。其中，設置了 content 屬性為空，即不顯示內容，只用于定位。我們將這兩個半圓形都定位到容器的頂部中間，并設置寬度為 50px，高度為 80px。設置了一個背景色為紅色的漸變色，用來代表愛心的顏色。同時，為了讓半圓形既可愛又有立體感，我們使用了 border-radius 屬性來設置四個角的圓角半徑，并使用 transform 屬性來旋轉這兩個半圓形。

最后，我們再設置一個 :after 偽元素，用來畫出愛心的右側半圓形。它與左側的半圓形形狀相同，只需要將 left 屬性設為 0，并將 transform 屬性的 rotate() 方法中的角度改為 45deg，就能設定它的旋轉角度了。同時，為了讓它從右側銜接到左側，我們要設置 transform-origin 屬性，讓它的旋轉中心點在右側的底部。

這樣，我們就完成了用 CSS 繪制愛心圖案的過程，得到的效果如下所示：