1.功能需求：
最近有一个基于微信开发的Mobile Web项目，是一个活动页面。功能需求：用户使用微信扫描二维码，然后授权使用微信登录，然后读取用户的昵称和头像，然后显示在一个饼图上面。头像需要有 一个心形套住，大家看到很多页面，都是使用圆形套住，比如新版的手机QQ联系人，截图如下：
微信登录如图，拿的微信开放平台的美丽说的截图：
2.实现代码
<!DOCTYPE html><html> <head> <title>css3制作心形头像</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> #headimage{ position: absolute; top: 50%; left: 50%; } /*心形头像*/ .heart{ float:left; width:90px;height:54px;position:relative; } /* after 伪元素在元素之前添加内容*/ .heart .before{ content:" "; border-radius:160px 160px 0 0;/* 正方形的内切圆的半径等于正方形边长的一半 */ -moz-border-radius: 160px 160px 0 0; -ms-border-radius: 160px 160px 0 0; -o-border-radius: 160px 160px 0 0; -webkit-border-radius: 160px 160px 0 0; width:60px; height:100px;/* 长方形 */ -moz-transform: rotate(-45deg);/* 逆时针旋转45°*/ -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position:absolute; left:10px; overflow: hidden; } .before > div { width: 120px; height: 120px; background-size: 120px; position: absolute; bottom: 0px; left: -100%; -webkit-transform: rotate(45deg); -webkit-transform-origin: bottom center; } /* after 伪元素在元素之后添加内容*/ .heart .after{ content:" "; width:60px; height:100px; border-radius:160px 160px 0 0; -moz-border-radius:160px 160px 0 0; -ms-border-radius:160px 160px 0 0; -o-border-radius: 160px 160px 0 0; -webkit-border-radius: 160px 160px 0 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); position:absolute; left:38px;top:0px; overflow: hidden; } .after > div { width: 120px; height: 120px; background-size: 120px; position: absolute; bottom: 0px; right: -100%; -webkit-transform: rotate(-45deg); -webkit-transform-origin:bottom center; } body{ width:400px; height:400px; margin: 0 auto; } </style> </head> <body> <h3>原始图片:</h3> <div style="text-align:center;"> <img src="images/1.jpg" alt="用户头像"/> </div> <h3>心形头像:</h3> <div id="headimage"> <!-- <img id="headimgurl" style="width:80px;height:80px;border-radius: 40px;"/>--> <!--css3制作心形头像--> <div class="heart"> <div class="before"> <div class="userphoto"><img src="images/1.jpg" alt="用户头像"/></div> </div> <div class="after"> <div class="userphoto"><img src="images/1.jpg" alt="用户头像"/></div> </div> </div> </div> </body></html>效果如图：
