-------------------------------------
今天是七夕节，作为单身狗
的博主，今天给大家带来个
爱心效果，希望大家早日
脱单（手动滑稽）
-------------------------------------
效果如上图所示，下面贴上
代码：
-------------------------------------
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>demo</title> 6 ????<style type="text/css"> 7 ????????*{ 8 ????????????margin:0; 9 ????????????padding:0;10 ????????}11 ????????.love{12 ????????????position:relative;13 ????????????top:100px;14 ????????????left:300px;15 ????????}16 ????????.love:before,.love:after{17 ????????????content: "";18 ????????????width: 70px;19 ????????????height: 115px;20 ????????????position: absolute;21 ????????????background: red;22 ????????????left: 70px;23 ????????????top: 0;24 ????????????border-radius: 50px 50px 0 0;25 ????????????-webkit-transform: rotate(-45deg);26 ????????????-webkit-transform-origin: 0 100%;27 ????????}28 ????????.love:after{29 ????????????left: 0;30 ????????????-webkit-transform: rotate(45deg);31 ????????????-webkit-transform-origin: 100% 100%;32 ????????}33 ????</style>34 </head>35 <body>36 ????<div class="love"></div>37 </body>38 </html>-------------------------------------
下面给大家分析一下实现
的原理：
1.首先绘制两个重叠的
2.分别顺时针和逆时针
旋转45度角：
-------------------------------------
这样，就完成了爱心的
绘制了，感谢大家的阅
读；
css实现爱心效果
原文地址：http://www.cnblogs.com/qmdx00/p/7442305.html