css 画爱心

浏览数：25 / 时间：2015年06月09日

用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>