網頁中我們用到愛心❤的地方不少，如看到一篇喜歡的文章給他點個贊，表白你喜歡的女孩，給他比個小心心什么的。
今天用純css寫一個簡單的愛心。
簡單思路如下：
1.先做一個盒子，里面包含兩個小盒子
2.兩個小盒子弄成一樣大小的長方形
3.通過border-radius、transform，進行調整，整合成一個愛心
代碼如下：
HTML部分：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 愛心</title> </head> <body> <div class="contain"> <div class="right"></div> <div class="left"></div> </div> </body> </html>
css部分：
.contain{ width: 300px; height:300px； margin:100px auto; } .left{ float: left; width: 150px; height: 228px; background: red; border-radius: 100px 100px 0 0; transform:translateX(-95px) rotate(45deg); } .right{ float: left; width: 150px; height: 228px; background: red; border-radius: 100px 100px 0 0; transform: rotate(-45deg); }
注：因各瀏覽器對css3支持不一的關系，所以需要在transform前加各種瀏覽器識別前綴，我這偷了個懶就沒詳細寫上了。
-ms-transform:rotate(7deg); //-ms代表ie內核識別碼
-moz-transform:rotate(7deg); //-moz代表火狐內核識別碼
-webkit-transform:rotate(7deg); //-webkit代表谷歌內核識別碼
-o-transform:rotate(7deg); //-o代表歐朋【opera】內核識別碼
transform:rotate(7deg); //統一標識語句。
最后一句最好還是寫上，符合w3c標准。