CSS繪制出各種形狀的代碼，可能比較吸引人的就是桃心??了，下面就為大家呈現(xiàn)一下如何用CSS繪制桃心的代碼：

.heart {
width: 100px;
height: 90px;
position: relative;
background: linear-gradient(to bottom, #fc2d2d 50%, #ff5c5c 100%);
transform: rotate(-45deg);
margin: 50px auto;
}
.heart:before,
.heart:after {
content: "";
width: inherit;
height: inherit;
background: inherit;
border-radius:50% 50% 0 0;
position: absolute;
}
.heart:before {
top: -45px;
}
.heart:after {
left: -45px;
transform: rotate(90deg);
}

其中，.heart選擇器用來規(guī)定桃心的樣式，它的寬度為100像素，高度為90像素，設(shè)置了一個從紅色到粉色的漸變背景，同時將桃心向左旋轉(zhuǎn)了45度，讓它變成我們熟知的桃心的形狀。

而.heart:before和.heart:after就相當(dāng)于桃心的兩瓣，這兩個偽元素是相對于.heart定義的，它們的內(nèi)容為空，大小與.heart相同，而且背景顏色也和.heart相同。我們使用border-radius屬性將兩個偽元素的角度設(shè)置為50% 50% 0 0，這樣就形成了兩個拱形了。

其中，.heart:before在上方，它的位置為桃心的中心，因為top:-45px，也就是它向上偏移了45像素；而.heart:after在左邊，它的位置也在桃心的中心，只不過它向左偏移了45像素，同時我們?yōu)樗黾恿艘粋€transform:rotate(90deg)的屬性值，這樣它就可以旋轉(zhuǎn)成另外一個拱形了。

這個桃心代碼看起來比較不容易理解，但是如果你實際操作過一次，你就會發(fā)現(xiàn)，其實用CSS繪制一個桃心還是很簡單的一件事情。希望大家能夠?qū)@個代碼有所啟發(fā)，從而創(chuàng)造更加炫酷的動態(tài)效果！