在網頁設計中，花式裝飾圖片和文字的效果是很常見的，今天我們教你如何使用CSS畫出一個可愛的愛心。

/*HTML*/
<div class="heart"></div>
/*CSS*/
.heart {
position: relative;
width: 50px;
height: 50px;
background-color: #FFB6C1;
transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: inherit;
border-radius: 50% 50% 0px 0px;
}
.heart::before {
top: -25px;
}
.heart::after {
left: -25px;
transform: rotateZ(90deg);
}

首先創建一個寬高為50個像素的DIV元素，并設置背景顏色為粉色。然后，通過CSS的transform屬性將這個DIV元素沿X軸和Z軸旋轉，使得兩個三角形心形圖案拼成一個心形。

.heart::before,
.heart::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: inherit;
border-radius: 50% 50% 0px 0px;
}

接著使用偽類: before和: after來創建兩個三角形，從而拼接成心形。在這里，將兩個三角形的內容設置為空，絕對定位它們，然后設置寬高以及顏色，最后使用border-radius屬性來定義它們的形狀。

.heart::before {
top: -25px;
}
.heart::after {
left: -25px;
transform: rotateZ(90deg);
}

最后使用偽類: before和: after分別使三角形位于DIV元素的上部和左部。然后對其中一個三角形進行90度的Z軸旋轉以拼接成心形。在其中一個三角形的top屬性中使用負數，使它在DIV元素的上方。通過使用不同屬性以及旋轉，您可以創建您自己的愛心的樣式。