纯css 制作简单的爱心
网页中我们用到爱心❤的地方不少，如看到一篇喜欢的文章给他点个赞，表白你喜欢的女孩，给他比个小心心什么的。
今天用纯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标准。
