在網頁設計中，用心形圖案可以增加頁面的情感氛圍，讓頁面更加生動。下面就來介紹一下如何用CSS制作心形圖案。

.heart {
width: 50px;
height: 50px;
background-color: #ff0000;
transform: rotate(-45deg);
}
.heart::before {
content: "";
width: 50px;
height: 50px;
background-color: #ff0000;
border-radius: 25px 0 0 25px;
position: absolute;
left: 25px;
top: 0;
}
.heart::after {
content: "";
width: 50px;
height: 50px;
background-color: #ff0000;
border-radius: 0 25px 25px 0;
position: absolute;
left: 0;
top: 25px;
}

首先，我們創建一個寬高都是50px的div容器，其背景顏色為紅色。然后我們讓這個容器進行45度的旋轉，使其成為一個傾斜的正方形。接下來我們用偽元素:before和:after，分別為這個容器畫出左邊半圓和右邊半圓，形成一個心形圖案。

這就是用CSS制作心形圖案的簡單方法。這種方法可以應用于各種大小的容器中，只要你修改對應的寬高即可。