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