CSS 心形的繪制方法

CSS 是前端開發中常用的樣式表語言，可以幫助我們設計網頁的布局、顏色、字體、大小等等。在 CSS 里面，我們也可以用一些簡單的代碼實現一些神奇的效果，比如制作一個心形！下面就來看看如何用 CSS 快速繪制一個心形。

.heart {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(to right, #fb7d6a, #ef4136);
position: relative;
transform: rotate(45deg);
}
.heart::before,
.heart::after {
content: "";
position: absolute;
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(to right, #fb7d6a, #ef4136);
}
.heart::before {
top: -50px;
left: 0;
}
.heart::after {
top: 0;
left: -50px;
}

上面就是代碼實現的部分，下面就來逐步講解一下：

1. 首先我們要用一個 div 元素來表示整個心形，給它設置寬高和圓角屬性。

.heart {
width: 100px;
height: 100px;
border-radius: 50%;
}

2. 接下來我們要給這個 div 元素設置一個漸變的背景色，讓它看起來更美觀。這里我們采用了線性漸變，從左到右漸變為兩種色值。

.heart {
background: linear-gradient(to right, #fb7d6a, #ef4136);
}

3. 現在我們已經有了一個很像心形的 div 元素，但是它還缺少一些細節，比如兩個圓形的“弓形”和兩個“突出來”的半圓。為了實現這些效果，我們可以使用 ::before 和 ::after 偽元素來為 div 元素添加這些細節。

.heart::before,
.heart::after {
content: "";
position: absolute;
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(to right, #fb7d6a, #ef4136);
}

4. 接下來就是根據位置和角度設置兩個偽元素的樣式，讓它們看起來分別組成了心形的兩個弓形和兩個突出的半圓。通過 top 和 left 屬性來控制位置，通過 transform: rotate(45deg); 來控制角度。

.heart::before {
top: -50px;
left: 0;
}
.heart::after {
top: 0;
left: -50px;
}

這樣，我們就成功地用 CSS 繪制了一個心形，非常簡單吧！