标签：
用css画爱心，虽然这样的方法会写很多的css代码，但是做成功之后，会有一种很满足的成就感。
爱心，可以有3个常规的几何图形形成，一个正方形加两个相同半径的圆或半圆。一个等腰三角形加两个圆，两个房型叠加，都行。
我的实现方法是选择最简单的一个正方形加两个相同半径的圆。首先创建一个类名为heart的div，然后为其固定宽度，高度，和背景颜色。接着通过伪类选择器：before和：after添加content：‘‘; 规定其宽度和高度都为之前的div的高度，背景颜色与之前的div相同，通过一个大于高度和宽度等同的那个值的一半的border-radius使之成为圆形。然后把两个圆的position值定为absolute，div的值定为relative；通过绝对定为的方法，把：before和：after其中一个top：一半的高宽等同值的负数，left：0；另一个的top：0，left：一半的高宽等同值。这样一个倒着的心形就画好了。最后只要我们通过旋转div就可以获得一个心形。div高宽等同的时候，旋转的角度为-45度。通过transform：rotate（-45deg）即可，但这个transform需要用到其他的前缀，可用prefixer插件，或css3 please中查找到相应前缀。下面是完整的代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS Heart</title> 6 <style> 7 div.heart{ 8 margin:100px; 9 width:40px; 10 height:40px; 11 background:#E74C3C; 12 -webkit-transform:rotate(-45deg); 13 -moz-transform:rotate(-45deg); 14 -ms-transform:rotate(-45deg); 15 -o-transform:rotate(-45deg); 16 transform:rotate(-45deg); 17 position:relative; 18 } 19 div.heart:before,div.heart:after{ 20 position:absolute; 21 content:‘‘; 22 width:40px; 23 height:40px; 24 background:#E74C3C; 25 -moz-border-radius:20px; 26 border-radius:20px; 27 } 28 div.heart:before{ 29 top:-20px; 30 left:0; 31 } 32 div.heart:after{ 33 top:0; 34 left:20px; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="heart"></div> 40 </body> 41 </html>
标签：
原文地址：http://www.cnblogs.com/DongJianguo/p/4189487.html
