在網頁開發中，我們經常需要把一些圖形和圖標加入到頁面中，來增強頁面的美觀程度和用戶體驗。而在CSS3中，我們可以使用CSS3的一些新特性來寫出許多炫酷的圖形，比如說一個十分可愛的心形。

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

以上代碼使用了一個叫做偽元素的技術，使用:before和:after來創建兩個同等大小的圓形，再組合成心形。因為CSS3的rotate屬性可以讓元素進行旋轉，所以我們設置:before元素繞著左上角旋轉45度，并移動到上面，:after元素則繞著右上角旋轉45度，并移動到中間。最后使用border-radius將兩個元素的邊框半徑設置為50%，讓它們變成圓形。

在這個例子中，我們設置了這個心形的寬高為100px，因此你可以把它放到任何想要的位置。可以在CSS文件中為元素添加更多的樣式，比如給它添加動畫效果，使得這個可愛的小心心更加動人。