CSS中的div愛心是一種非常熱門的設計技巧，它允許開發者在網頁中使用CSS樣式來創建一個華麗的愛心圖案。這種設計技巧常見于個人網站、博客或者情人節等場合。通過使用一些簡單而巧妙的CSS代碼，我們可以實現一個漂亮的愛心效果。

以下是使用CSS和div元素創建愛心的幾個案例：

案例一:

<div class="heart"></div>
<style>
.heart {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
position: relative;
margin: 20px;
}
.heart:before,
.heart:after {
content: '';
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
position: absolute;
}
.heart:before {
top: -50px;
left: 0;
}
.heart:after {
top: 0;
left: 50px;
}
</style>

在該代碼案例中，我們定義了一個class為"heart"的div元素。通過設置元素的寬度、高度、背景色，并對其進行旋轉，我們將其形狀變成了一個愛心。接下來，通過:before和:after偽元素，我們創建了兩個相同大小的圓形元素，然后分別定位在div元素的上方和右方。通過調整這兩個圓形元素的位置和顏色，我們使其與div元素相配合，呈現出一個完整的愛心形狀。

案例二:

<div class="heart"></div>
<style>
.heart {
width: 100px;
height: 100px;
background-color: red;
position: relative;
margin: 20px;
}
.heart:before,
.heart:after {
content: '';
width: 60px;
height: 100px;
background-color: red;
border-radius: 50%;
position: absolute;
}
.heart:before {
top: -50px;
left: 0;
transform: rotate(-45deg);
}
.heart:after {
top: -50px;
right: 0;
transform: rotate(45deg);
}
</style>

在這個案例中，我們也是通過定義一個class為"heart"的div元素來創建愛心效果。不同于之前的案例，我們使用了兩個圓形元素作為愛心的兩側。分別通過:before和:after偽元素來創建這兩個圓形元素，然后通過旋轉它們的角度，使其形狀與div元素相呼應，從而呈現出一個愛心的效果。

綜上所述，通過巧妙地運用CSS和div元素，我們可以輕松地創建出令人眼前一亮的愛心設計效果。這些案例只是其中的一小部分，你可以根據自己的創意和需求，進一步探索和創造獨特的愛心效果。