查看效果:
?http://hovertree.com/code/css/heartcss.htm
<!doctype html>
<title>纯CSS画心 by 何问起</title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯CSS画心 by 何问起" />
<meta name="description" content="纯CSS画心 by 何问起" />
</head>
<body>
<style type="text/css">
.hewenqiheart{width:160px;height:200px;position:relative}
.hewenqiheart:before{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:red;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);
position:absolute;left:20px;}
.hewenqiheart:after{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:red;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);
position:absolute;left:48px;top:0px;}
</style>
<h3>纯CSS画心 by 何问起</h3>
<p>hovertree.com</p>
<div class="hewenqiheart">
</div>
</body>
</html>
?更多特效:?http://ini.iteye.com/blog/2165698?? ? ? ?
原文:http://ini.iteye.com/blog/2276256