CSS构造心形

查看效果:

 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        

你可能感兴趣的:(html,Web,css,html5,css3)