在網(wǎng)頁中加入心形元素可以增添頁面的設(shè)計(jì)感，使用 CSS 來制作出一個(gè)漂亮的心形圖案也非常簡(jiǎn)單。

下面我們來看一下 CSS 的具體制作方法。

.heart {
width: 100px;
height: 100px;
position: relative;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
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%;
}

以上就是 CSS 制作心形的代碼，我們可以將其應(yīng)用到指定的 HTML 元素中：

<div class="heart"></div>

這樣一個(gè)漂亮的紅色心形就呈現(xiàn)在我們頁面中了。