CSS 可以很容易地創建各種形狀，包括我們熟悉的愛心形狀。下面是一些 CSS 代碼，可以用來創建一個漂亮的愛心。

.heart {
width: 100px;
height: 90px;
position: relative;
margin: 10px auto;
transform: rotate(-45deg);
box-shadow: inset -10px 0 10px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.2);
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: red;
border-radius: 50%;
}
.heart::before {
top: 0;
left: 0;
}
.heart::after {
top: -45px;
left: 45px;
}

如上所述，我們可以使用偽元素::before和::after來創建一個愛心形狀。我們設置較大的寬度和高度值，用position: relative將容器定位，然后將其旋轉 45 度和陰影投射。

偽元素的屬性設置為繼承父元素的高度和寬度，填充顏色，以及圓形的邊框半徑。我們使用::before和::after屬性分別設置愛心的上半部分和下半部分的位置。

嘗試這些 CSS 代碼，您會發現，創建一個漂亮的愛心只需幾行代碼。